clerk-nextjs-patterns

# Next.js + Clerk Authentication Pattern for Acme Corp

## Server-Side Protected API Route (Next.js 14)
```typescript
// app/api/protected/route.ts
import { auth } from '@clerk/nextjs/server';
import { NextResponse } from 'next/server';

export async function GET() {
  const { userId } = auth();
  
  if (!userId) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
  
  // Fetch user-specific data from your DB
  const userData = await db.query('SELECT * FROM users WHERE id = $1', [userId]);
  
  return NextResponse.json({ data: userData });
}
```

## Client-Side User Caching Strategy
```typescript
// components/UserProfile.tsx
'use client';

import { useUser } from '@clerk/nextjs';
import { useEffect, useState } from 'react';

const UserProfile = () => {
  const { user } = useUser();
  const [cachedData, setCachedData] = useState(null);
  
  useEffect(() => {
    // Only fetch if we don't have cached data
    if (user && !cachedData) {
      fetch(`/api/user-cache?userId=${user.id}`)
        .then(res => res.json())
        .then(data => setCachedData(data));
    }
  }, [user, cachedData]);
  
  return <div>{cachedData?.name || 'Loading...'}</div>;
};
```

## Middleware Configuration
```typescript
// middleware.ts
import { authMiddleware } from '@clerk/nextjs/server';

export default authMiddleware({
  publicRoutes: ['/api/webhook'],
  ignoredRoutes: ['/api/ignored'],
});
```

**Key Trade-offs:**
- Server-side auth provides security but increases server load
- Client-side caching improves performance but requires careful cache invalidation
- Middleware adds complexity but enables fine-grained route protection