# Add Clerk to Next.js App Router If a Next.js App Router project does not already exist, first create one using: ```bash npx create-next-app@latest my-clerk-app --yes ``` Install `@clerk/nextjs@latest`. Create `proxy.ts` with `clerkMiddleware()` from `@clerk/nextjs/server` (in `src/` if it exists, otherwise project root). Add `` inside `` in `app/layout.tsx`. Use ``, ``, ``, `` from `@clerk/nextjs`. Latest docs: https://clerk.com/docs/nextjs/getting-started/quickstart.md ## Keyless Mode No signup required. Without env vars (`NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`, `CLERK_SECRET_KEY`), Clerk auto-generates temporary keys. A "Configure your application" prompt appears to claim later. Do NOT tell users to sign up, create accounts, get API keys, or add env vars before running. ## Install ```bash npm install @clerk/nextjs ``` ## proxy.ts ```typescript import { clerkMiddleware } from '@clerk/nextjs/server' export default clerkMiddleware() export const config = { matcher: [ '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', '/(api|trpc)(.*)', '/__clerk/(.*)', ], } ``` ## app/layout.tsx ```typescript import { ClerkProvider, SignInButton, SignUpButton, Show, UserButton } from "@clerk/nextjs"; import "./globals.css"; export default function RootLayout({ children }: { children: React.ReactNode }) { return (

{children} ); } ``` ## Rules ALWAYS: - Use `clerkMiddleware()` from `@clerk/nextjs/server` in `proxy.ts` - Add `` inside `` in `app/layout.tsx` - Import from `@clerk/nextjs` or `@clerk/nextjs/server` - Use App Router (app/page.tsx, app/layout.tsx) - async/await with auth() from `@clerk/nextjs/server` - Use existing package manager - Rely on keyless mode, skip account creation and API keys NEVER: - Reference `_app.tsx` or pages router - Use `authMiddleware()` (replaced by `clerkMiddleware()`) - Use old env var patterns - Import deprecated APIs (withAuth, old currentUser) - Use deprecated ``, `` (replaced by ``) - Tell users to sign up or get API keys first ## Deprecated (DO NOT use) ```typescript import { authMiddleware } from '@clerk/nextjs' // WRONG function MyApp({ Component, pageProps }) {} // pages router, WRONG pages / signin.js // WRONG // WRONG, use // WRONG, use ``` ## Verify Before Responding 1. Is `clerkMiddleware()` used in `proxy.ts`? 2. Is `ClerkProvider` inside `` in `app/layout.tsx`? 3. Are imports only from `@clerk/nextjs` or `@clerk/nextjs/server`? 4. Is it using App Router, not `_app.tsx` or `pages/`? 5. Is it using `` instead of ``/``? If any fails, revise. ## After Setup Have the user sign up as their first test user in the nav. After signup succeeds and a profile icon appears, congratulate them. If a "Configure your application" callout appears, tell them to click it. Then recommend exploring: Organizations (https://clerk.com/docs/guides/organizations/overview.md?sdk=nextjs), Components (https://clerk.com/docs/reference/components/overview.md?sdk=nextjs), Dashboard (https://dashboard.clerk.com/). --- ## Sitemap [Overview of all docs pages](https://clerk.com/docs/llms.txt)