How does it handle caching for authenticated users?

It provides patterns for using userId within cache keys (like unstable_cache) to ensure that cached data is correctly scoped to the individual user.

What is the main difference between server and client auth in this skill?

The skill emphasizes that Server Components must use the asynchronous auth() helper from @clerk/nextjs/server, while Client Components must use the synchronous useAuth() hook.

How does this skill help with Next.js Server Actions?

It provides standardized patterns to protect mutations by verifying the user's authentication state at the start of the action using the asynchronous auth() helper.

Can I use this for both App Router and Pages Router?

While it focuses on modern Next.js patterns like Server Actions and Server Components, the middleware and API route guidance applies to both architectures.

Does this skill support older versions of the Clerk SDK?

Yes, it includes specific callouts for 'Core 2' differences, such as using userId checks instead of the newer isAuthenticated boolean.

Next.js Authentication Patterns

Name: Next.js Authentication Patterns
Author: clerk

byclerk

•

Security & Testing

Implements advanced Clerk authentication patterns for Next.js applications, including Server Actions, middleware, and caching strategies.

This skill provides a comprehensive mental model and implementation guide for integrating Clerk authentication within the Next.js ecosystem. It bridges the gap between client-side and server-side authentication by providing specific patterns for Server Components, Client Components, and Server Actions. Developers can use this skill to ensure secure route protection, correct middleware configuration, and optimized performance through user-scoped caching, while avoiding common pitfalls like unawaited auth calls or improper HTTP status codes.

Key Features

0113 GitHub stars

02Security patterns for protecting Next.js Server Actions and API mutations

03Optimized middleware strategies for public-first or protected-first routing

04Implementation guides for user-scoped data caching to prevent data leaks

05Version-specific support for Clerk Core 2 and Core 3 SDK transitions

06Expert guidance on server-side auth() vs client-side useAuth() usage

Use Cases

01Securing data mutations in Next.js Server Actions with session verification

02Configuring complex middleware matchers to handle auth across API and page routes

03Implementing efficient, user-specific caching strategies in the App Router

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add clerk/skills nextjs-patterns

For use in Claude.ai and ChatGPT

Download Skill