How do I install the Clerk Nextjs Patterns skill?

Run npx skillmds add majiayu000/clerk-nextjs-patterns in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Clerk Nextjs Patterns skill do?

Advanced Next.js patterns - middleware, Server Actions, caching with Clerk. It is listed under Web & Frontend on SkillMD.

Is Clerk Nextjs Patterns safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Clerk Nextjs Patterns?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Clerk Nextjs Patterns free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Clerk Nextjs Patterns?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Clerk Nextjs Patterns by majiayu000

Name: Clerk Nextjs Patterns
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

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

---name: clerk-nextjs-patternsdescription: Advanced Next.js patterns - middleware, Server Actions, caching with Clerk.license: MIT--- # 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)

Frequently asked questions