Get started with Next.js

Learn how to use Clerk to quickly and easily add secure authentication and user management to your Next.js application. Clerk works seamlessly on both client and server side components.

By the end of this guide you will have installed the following user functionality in your application:

Sign Up
Sign In
Protect Pages behind authentication
Manage Account
Sign Out

Install @clerk/nextjs

Once you have a Next.js application ready, you need to install Clerk's Next.js SDK. This gives you access to prebuilt components and hooks, as well as our helpers for Next.js API routes, server-side rendering, and middleware.

Your project1

Set Environment Keys

Below is an example of a .env.local file. If you are logged in to Clerk you will see your keys below and you can copy them directly. Otherwise, you can retrieve them from API Keys in the Clerk dashboard.

.env.local1

Mount ClerkProvider

Update your root layout to include the <ClerkProvider> wrapper. The <ClerkProvider> component wraps your Next.js application to provide active session and user context to Clerk's hooks and other components. It is recommended that the <ClerkProvider> wraps the <body> to enable the context to be accessible anywhere within the app.

1
// app/layout.tsx
2
import './globals.css'
3
import { Inter } from 'next/font/google'
4
import { ClerkProvider } from '@clerk/nextjs'
5

6
const inter = Inter({ subsets: ['latin'] })
7

8
export const metadata = {
9
  title: 'Create Next App',
10
  description: 'Generated by create next app',
11
}
12

13
export default function RootLayout({
14
  children,
15
}: {
16
  children: React.ReactNode
17
}) {
18
  return (
19
    <ClerkProvider>
20
      <html lang="en">
21
        <body className={inter.className}>{children}</body>
22
      </html>
23
    </ClerkProvider>
24
  )
25
}
26

1
// page/_app.tsx
2
import { ClerkProvider } from "@clerk/nextjs";
3
import type { AppProps } from "next/app";
4
 
5
function MyApp({ Component, pageProps }: AppProps) {
6
  return (
7
    <ClerkProvider {...pageProps}>
8
      <Component {...pageProps} />
9
    </ClerkProvider>
10
  );
11
}
12
 
13
export default MyApp;

The root layout is a server component, if you plan to use the <ClerkProvider> outside the root layout, it will need to be a server component as well.

Protect your Application

Now that Clerk is installed and mounted in your application, it’s time to decide which pages are public and which need to hide behind authentication. We do this by creating a middleware.ts file at the root folder (or inside src/ if that is how you set up your app).

middleware.ts1

With this, your entire application is protected and if you try to access it, it will redirect you to your Sign Up page. If you want to make other routes public, you can read more on the authMiddleware reference page.

Mount the <UserButton />

The <UserButton /> allows you to manage your account information and log out, thus allowing you to complete a full authentication circle.

You can add it anywhere you want, next to the logo in app/page.tsx is a good start.

1
//app/page.tsx
2
import { UserButton } from "@clerk/nextjs";
3

4
export default function Home() {
5
  return (
6
    <div>
7
      <UserButton />
8
    </div>
9
  )
10
}

1
// pages/example.tsx
2
import { UserButton } from "@clerk/nextjs";
3
 
4
export default function Example() {
5
  return (
6
    <>
7
			<header>
8
				<UserProfile />
9
			</header>
10
			<div>Your page's content can go here.</div>
11
    </>
12
  );
13
}

Now npm run dev , visit http://localhost:3000 and Sign up to get access to your application.

Next Steps

Get started with Next.js

Set Environment Keys

Mount ClerkProvider

Protect your Application

Mount the <UserButton />

Sign up for your Application