clerk-nextjs-patterns
Advanced Next.js patterns - middleware, Server Actions, caching with Clerk.
소스 정보
- 저장소
- mediar-ai/skillhubz
- 최근 소스 활동
- 2026년 3월 1일 22:50
- 감지된 SKILL.md 언어
- 영어
- 스타
- 7
- 포크
- 4
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- clerk-nextjs-patterns
- description
- Advanced Next.js patterns - middleware, Server Actions, caching with Clerk.
- license
- MIT
- allowed-tools
- WebFetch
- metadata
- {"author":"clerk","version":"1.0.0"}
# Next.js Patterns
For basic setup, see `setup/`.
## Impact Levels
- **CRITICAL** - Breaking bugs, security holes
- **HIGH** - Common mistakes
- **MEDIUM** - Optimization
## References
| Reference | Impact |
|-----------|--------|
| `references/server-vs-client.md` | CRITICAL - `await auth()` vs hooks |
| `references/middleware-strategies.md` | HIGH - Public-first vs protected-first |
| `references/server-actions.md` | HIGH - Protect mutations |
| `references/api-routes.md` | HIGH - 401 vs 403 |
| `references/caching-auth.md` | MEDIUM - User-scoped caching |
## Mental Model
Server vs Client = different auth APIs:
- **Server**: `await auth()` from `@clerk/nextjs/server` (async!)
- **Client**: `useAuth()` hook from `@clerk/nextjs` (sync)
Never mix them. Server Components use server imports, Client Components use hooks.
## Minimal Pattern
```typescript
// Server Component
import { auth } from '@clerk/nextjs/server'
export default async function Page() {
const { userId } = await auth() // MUST await!
if (!userId) return <p>Not signed in</p>
return <p>Hello {userId}</p>
}
```
## Common Pitfalls
| Symptom | Cause | Fix |
|---------|-------|-----|
| `undefined` userId in Server Component | Missing `await` | `await auth()` not `auth()` |
| Auth not working on API routes | Missing matcher | Add `'/(api|trpc)(.*)'` to middleware |
| Cache returns wrong user's data | Missing userId in key | Include `userId` in `unstable_cache` key |
| Mutations bypass auth | Unprotected Server Action | Check `auth()` at start of action |
| Wrong HTTP error code | Confused 401/403 | 401 = not signed in, 403 = no permission |
## See Also
- `setup/`
- `managing-orgs/`
## Docs
[Next.js SDK](https://clerk.com/docs/reference/nextjs/overview)
GitHub에서 보기