clerk-nextjs-patterns

📁 clerk/skills 📅 14 days ago

463

总安装量

465

周安装量

#612

全站排名

安装命令

npx skills add https://github.com/clerk/skills --skill clerk-nextjs-patterns

Agent 安装分布

claude-code 305

codex 304

opencode 298

gemini-cli 280

github-copilot 275

kimi-cli 220

Skill 文档

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

// 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
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

Docs

Next.js SDK

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台