Next.js App Router Integration with Clerk
Let us configure a Next.js App Router project to support Clerk authentication features.
1. Installing the Next.js SDK
Install the package dependency in your Next.js codebase root:
# Install the Clerk Next.js SDK
npm install @clerk/nextjs2. Environment Variables Configuration
Retrieve your API keys from the Clerk Dashboard API Keys page and add them to your local .env.local configuration file:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
CLERK_SECRET_KEY="sk_test_..."- Publishable Key: Exposes security keys to the frontend React components to build sessions.
- Secret Key: Used by servers, serverless APIs, or middlewares to decode user JWT identities.
3. Configuring the ClerkProvider
To enable Clerk hooks and components, wrap your Next.js application root inside the ClerkProvider wrapper:
// app/layout.tsx
import React from "react";
import { ClerkProvider } from "@clerk/nextjs";
import "./globals.css";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<ClerkProvider>
<html lang="en">
<body>
{children}
</body>
</html>
</ClerkProvider>
);
}The ClerkProvider maintains the active browser session, automatically synchronizes cookie states, and updates user auth objects across server components and client layers.
Published on Last updated: