Clerk is the fastest way to add complete authentication to a Next.js App Router application. Sign-in, sign-up, user profile management, and session handling are all handled by Clerk — you drop in components and protect routes. This guide covers the complete setup.

Install and Configure

npm install @clerk/nextjs
# .env.local
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...

Get your keys from the Clerk Dashboard at clerk.com. Create an application, choose your auth providers (email, Google, GitHub, etc.), and copy the keys.

Wrap Your App with ClerkProvider

// app/layout.tsx
import { ClerkProvider } from '@clerk/nextjs';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  );
}

Protect Routes with Middleware

// middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
 
const isPublicRoute = createRouteMatcher([
  '/',
  '/sign-in(.*)',
  '/sign-up(.*)',
  '/api/webhooks(.*)',
]);
 
export default clerkMiddleware((auth, request) => {
  if (!isPublicRoute(request)) {
    auth().protect();
  }
});
 
export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

Add Sign-In and Sign-Up Pages

// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from '@clerk/nextjs';
 
export default function SignInPage() {
  return (
    <div className="flex justify-center items-center min-h-screen">
      <SignIn />
    </div>
  );
}
// app/sign-up/[[...sign-up]]/page.tsx
import { SignUp } from '@clerk/nextjs';
 
export default function SignUpPage() {
  return (
    <div className="flex justify-center items-center min-h-screen">
      <SignUp />
    </div>
  );
}
# .env.local — tell Clerk where your auth pages live
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

Reading the User in Server Components

// app/dashboard/page.tsx — server component
import { auth, currentUser } from '@clerk/nextjs/server';
import { redirect } from 'next/navigation';
 
export default async function Dashboard() {
  const { userId } = auth();
  if (!userId) redirect('/sign-in');
 
  const user = await currentUser();
 
  return (
    <div>
      <h1>Welcome, {user?.firstName}!</h1>
      <p>Your user ID: {userId}</p>
    </div>
  );
}

Reading the User in API Routes

// app/api/documents/route.ts
import { auth } from '@clerk/nextjs/server';
 
export async function GET() {
  const { userId } = auth();
 
  if (!userId) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 });
  }
 
  const docs = await getDocumentsForUser(userId);
  return Response.json(docs);
}

Add a User Button to Your Nav

// components/nav.tsx — client component
'use client';
import { UserButton, SignedIn, SignedOut, SignInButton } from '@clerk/nextjs';
 
export function Nav() {
  return (
    <nav>
      <SignedIn>
        <UserButton afterSignOutUrl="/" />
      </SignedIn>
      <SignedOut>
        <SignInButton mode="modal" />
      </SignedOut>
    </nav>
  );
}
Metadata Value
Title Add Authentication to Your Next.js App with Clerk in 15 Minutes
Tool Clerk
Primary SEO keyword clerk next.js authentication
Secondary keywords clerk setup next.js, clerk app router, clerk middleware, clerk sign in component
Estimated read time 8 minutes
Research date 2026-04-14