Clerk Next.js Quickstart (App Router)

clerk/nextjs-quickstart

FreeBlock

A quickstart for Next.js App Router with Clerk authentication.

Install it

npx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json

Source

nextjs/common/layout-with-header/layout-with-header.tsxclerk.com/r/nextjs-quickstart.json

1import { ClerkProvider } from '@/components/clerk-provider';
2import { Header } from '@/components/header';
3import { ThemeProvider } from '@/components/theme-provider';
4import type { Metadata } from 'next';
5import { Geist, Geist_Mono } from 'next/font/google';
6import { cn } from '@/lib/utils';
7import './globals.css';
8 
9const geist = Geist({
10  variable: '--font-sans',
11  subsets: ['latin'],
12});
13 
14const geistMono = Geist_Mono({
15  variable: '--font-mono',
16  subsets: ['latin'],
17});
18 
19export const metadata: Metadata = {
20  title: 'Clerk Next.js Quickstart',
21  description: 'Generated by create next app',
22};
23 
24export default function RootLayout({
25  children,
26}: Readonly<{
27  children: React.ReactNode;
28}>) {
29  return (
30    <html
31      lang='en'
32      className={cn('h-full', geist.variable, geistMono.variable)}
33      suppressHydrationWarning
34    >
35      <body className='flex min-h-full flex-col antialiased'>
36        <ClerkProvider>
37          <ThemeProvider
38            attribute='class'
39            defaultTheme='system'
40            enableSystem
41            disableTransitionOnChange
42          >
43            <Header />
44            {children}
45          </ThemeProvider>
46        </ClerkProvider>
47      </body>
48    </html>
49  );
50}

What it pulls in

npm packages

@clerk/nextjs
@clerk/ui
next-themes

Other registry items

button
@clerk/nextjs-clerk-provider
@clerk/nextjs-middleware
@clerk/nextjs-theme-provider
@clerk/nextjs-header
@clerk/nextjs-layout-with-header

Files it writes

nextjs/common/layout-with-header/layout-with-header.tsx
nextjs/aio/sign-in-page/page.tsx
nextjs/aio/sign-up-page/page.tsx

More from clerk

All 12 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Multistep Onboarding Flow (AIO)nextjs-aio-multistep-onboarding	clerk	Blocks	Free	5 deps · 6 files
Multistep Onboarding Flownextjs-custom-flows-multistep-onboarding	clerk	Blocks	Free	8 deps · 5 files
Layout with Headernextjs-layout-with-header	clerk	Blocks	Free	3 deps
Clerk Next.js Quickstart — Sign-in-or-up (App Router)nextjs-quickstart-sign-in-or-up	clerk	Blocks	Free	3 deps · 2 files
Clerk Next.js Sign In Page (App Router)nextjs-sign-in-page	clerk	Blocks	Free	1 dep
Clerk Next.js Sign Up Page (App Router)nextjs-sign-up-page	clerk	Blocks	Free	2 deps
Clerk Next.js Waitlist Page (App Router)nextjs-waitlist-page	clerk	Blocks	Free	1 dep