skills.rest
Rajaryan1726
Rajaryan1726COMMUNITY
Explore all skills by this author →
GitHub

clerk-nextjs-patterns

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

Updated Aug 22, 2026
Search Tags:#authentication#jwt#middleware#server actions#nextjs#api routes#clerk
One-click install
npx skills add https://github.com/Rajaryan1726/ai-code-review-system --skill clerk-nextjs-patterns-rajaryan1726
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-nextjs-patterns
Source: https://github.com/Rajaryan1726/ai-code-review-system/tree/main/client/.agents/skills/clerk-nextjs-patterns
Command: npx skills add https://github.com/Rajaryan1726/ai-code-review-system --skill clerk-nextjs-patterns-rajaryan1726

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Developers integrating Clerk into Next.js apps often struggle with server-vs-client auth APIs, unprotected Server Actions and API routes, misconfigured middleware matchers, and cache keys that leak data between users. This Skill provides correct, version-aware patterns for each of these scenarios. ## Core Features & Use Cases - Server vs Client Auth Guidance: Correct usage of await auth() from @clerk/nextjs/server versus useAuth()/useUser() hooks, including Core 2 vs current SDK differences. - Route & Mutation Protection: Middleware strategies (public-first vs protected-first with createRouteMatcher), Server Action protection, and API route auth with proper 401 vs 403 semantics. - Token & Caching Patterns: Custom JWT templates via getToken() for third-party APIs like Hasura or Supabase, manual JWT verification for standalone servers, and user-scoped unstable_cache keys. - Use Case: You need to protect all /dashboard routes with Clerk middleware while keeping / and /sign-in public, then call an external GraphQL API with a custom JWT from a Server Component. ## Quick Start Ask the AI to protect your Next.js dashboard routes with Clerk middleware and convert a client component using useUser into a server component using await auth().

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 matched routes. Choose public-first for marketing sites or protected-first for internal dashboards.

How do I use Clerk auth() in Next.js Server Components?▼

Import auth from @clerk/nextjs/server and always await it, since it is async. Destructure isAuthenticated and userId to gate rendering; in Core 2 SDKs, check !!userId instead because isAuthenticated does not exist.

What is the difference between auth() and useAuth() in Clerk Next.js?▼

auth() is an async server-side function from @clerk/nextjs/server used in Server Components, actions, and route handlers. useAuth() is a synchronous client hook from @clerk/nextjs for interactive components. Never mix them across component types.

How do I verify a Clerk JWT without Clerk middleware?▼

Use verifyToken from @clerk/backend with CLERK_JWT_KEY, or jsonwebtoken with CLERK_PEM_PUBLIC_KEY using RS256. Extract the token from the Authorization Bearer header or __session cookie, and always validate exp and nbf claims.

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

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

Should my Clerk API route return 401 or 403?▼

Return 401 when the request is not authenticated at all, and 403 when the user is signed in but lacks the required role or permission. Check authentication first with auth(), then authorization with has().

Related Skills

Explore More Software Engineering Skills→
TwuanMinnTwuanMinn

clerk-auth

Implement Clerk authentication with ClerkProvider and middleware for Next.js App Router.

Community
Advanced
sudarshan-krishnansudarshan-krishnan

clerk-billing

Implement Clerk Billing subscription management in Next.js applications.

Community
Advanced
mihaicrisan04mihaicrisan04

clerk-custom-ui

Customize Clerk authentication components with themes, colors, fonts, and CSS.

Community
Intermediate
HieubkavHieubkav

better-auth

Configure TypeScript authentication for Cloudflare Workers with Drizzle ORM or Kysely.

Community
Advanced