clerk-nextjs-patterns

Implement Clerk authentication patterns for Next.js middleware, Server Actions, and API routes.

Updated Jul 9, 2026
One-click install
npx skills add https://github.com/DimonikRV/ghost-pilot-project --skill clerk-nextjs-patterns-dimonikrv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-nextjs-patterns
Source: https://github.com/DimonikRV/ghost-pilot-project/tree/main/.agents/skills/clerk-nextjs-patterns
Command: npx skills add https://github.com/DimonikRV/ghost-pilot-project --skill clerk-nextjs-patterns-dimonikrv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/nextjs, @clerk/backend, jsonwebtoken, and includes references (resource) components.

What problem does it solve? Securing a Next.js application with Clerk involves many distinct patterns—middleware configuration, server versus client auth APIs, Server Action protection, and user-scoped caching—and mixing them up causes bugs like undefined userIds, unprotected mutations, and cross-user cache leaks. ## Core Features & Use Cases - Server vs Client Auth Guidance: Correct usage of await auth() from @clerk/nextjs/server versus useAuth() hooks, including Core 2 compatibility notes. - Middleware Strategies: Public-first and protected-first route protection with createRouteMatcher, permission-gated routes, and token-based protection for machine APIs. - Server Actions, API Routes & Caching: Protect mutations, return correct 401/403 status codes, and scope unstable_cache keys by userId or orgId. - Use Case: You need to protect all routes under /dashboard so only signed-in users can access them, while keeping / and /sign-in public—this Skill provides the exact clerkMiddleware configuration with createRouteMatcher and auth.protect(). ## Quick Start Protect my Next.js dashboard routes with Clerk middleware so only authenticated users can access them.

Frequently Asked Questions about clerk-nextjs-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I protect Next.js routes with Clerk middleware?▼

Use clerkMiddleware with createRouteMatcher from @clerk/nextjs/server to define public or protected route patterns, then call auth.protect() for routes requiring authentication. Choose public-first for marketing sites or protected-first for internal tools and dashboards.

How do I check authentication in a Next.js Server Component with Clerk?▼

Call await auth() from @clerk/nextjs/server inside your async Server Component and check isAuthenticated or userId. The await is required—calling auth() without it returns undefined values. Client components use the useAuth() hook instead.

What is the difference between 401 and 403 in Clerk API routes?▼

Return 401 when the user is not authenticated (no valid session) and 403 when the user is authenticated but lacks the required permission or role. Check isAuthenticated first, then use has() to verify roles or permissions for the 403 case.

Why does my Next.js cache return another user's data with Clerk?▼

The cache key is missing the userId or orgId, so unstable_cache serves shared data across users. Include the user identifier in both the cache key array and the revalidation tag, then call revalidateTag after mutations.

Can I verify Clerk JWT tokens without Clerk middleware?▼

Yes, use verifyToken from @clerk/backend with CLERK_JWT_KEY, or the jsonwebtoken library with CLERK_PEM_PUBLIC_KEY using RS256. Always validate the exp and nbf claims and extract the token from the Authorization Bearer header or __session cookie.

How do I pass a Clerk token to an external API like Hasura?▼

Call getToken with a JWT template name from auth() server-side or useAuth() client-side, then send it as an Authorization Bearer header. Always null-check the returned token since getToken returns null for unauthenticated users.