clerk-nextjs-skills

Automate Clerk authentication setup for Next.js 16 App Router projects.

22|7|Updated Dec 20, 2025
One-click install
npx skills add https://github.com/gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: clerk-nextjs-skills
Source: https://github.com/gocallum/nextjs16-agent-skills/tree/main/skills/clerk-nextjs-skills
Command: npx skills add https://github.com/gocallum/nextjs16-agent-skills --skill clerk-nextjs-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @clerk/nextjs, @vercel/mcp-adapter, @clerk/mcp-tools, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a complete and production-ready solution for implementing Clerk authentication in Next.js 16 (App Router) apps, including proxy.ts middleware, environment validation, and MCP server integration.

Core Features & Use Cases

  • Proxied Clerk middleware via proxy.ts for Next.js 16 App Router
  • Migration guidance from middleware.ts to proxy.ts with zero-diff code
  • Start-up environment validation and safe defaults for Clerk keys
  • MCP server integration patterns for secure tool invocation and OAuth metadata
  • Real-world use cases: securing routes, server actions, and protected APIs with Clerk

Quick Start

Run through automated setup steps: install Clerk, create proxy.ts, configure environment variables, wrap your app with ClerkProvider, and start the dev server.

Frequently Asked Questions about clerk-nextjs-skills

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

FAQPage Schema
How do I set up Clerk authentication in a Next.js 16 App Router project?

Clerk authentication in Next.js 16 App Router uses proxy.ts middleware for secure request handling. Install @clerk/nextjs, create a proxy.ts file in your app directory, configure environment variables (NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY), wrap your app with ClerkProvider, and start your dev server. The Skill automates these steps end to end.

Can I migrate from middleware.ts to proxy.ts for Clerk without rewriting code?

Yes, this Skill provides zero-diff migration guidance from middleware.ts to proxy.ts-based Clerk middleware. The migration preserves your existing authentication logic while adopting Next.js 16's proxy.ts pattern for cleaner route protection and environment validation.

Does Clerk work with MCP server integration for agent communication?

Yes, Clerk integrates with MCP servers via @vercel/mcp-adapter and @clerk/mcp-tools for secure tool invocation and OAuth metadata handling. This Skill sets up patterns for agents to safely call Clerk-protected APIs and server actions with proper authentication context.

What environment variables do I need for Clerk in Next.js 16?

You need NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY (public, safe to expose) and CLERK_SECRET_KEY (private, server-side only). This Skill validates both variables at startup and applies safe defaults to prevent authentication failures during development and production deployments.

Can I use Clerk to protect server actions and APIs in Next.js 16?

Yes, Clerk secures routes, server actions, and protected APIs through proxy.ts middleware. This Skill demonstrates real-world patterns for wrapping server-side logic with Clerk authentication, ensuring only authorized requests reach your backend handlers.

Does this Skill work with pnpm-based Next.js projects?

Yes, this Skill is built for pnpm-based setup and provides startup environment validation tailored to pnpm workspaces. It ensures dependency installation and configuration steps work correctly with pnpm package management.