Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

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 project
1

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.local
1

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.ts
1

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.

Build your own sign in and sign up pages

Clerk offers a set of prebuilt components that you can use to embed sign in, sign up, and other user management functions into your Next.js application. We are going to use the <SignIn />,<SignUp /> components by utilizing the Next.js optional catch all route.

Build your sign up page

1
import { SignUp } from "@clerk/nextjs";
2


3
export default function Page() {
4
  return <SignUp />;
5
}
1
import { SignUp } from "@clerk/nextjs";
2


3
export default function Page() {
4
  return <SignUp />;
5
}

Build your sign in page

1
import { SignIn } from "@clerk/nextjs";
2


3
export default function Page() {
4
  return <SignIn />;
5
}
1
import { SignIn } from "@clerk/nextjs";
2


3
export default function Page() {
4
  return <SignIn />;
5
}

Update your environment variables

Next, add environment variables for the signIn , signUp and afterSignUp , afterSignIn paths:

.env.local
1

These values control the behavior of the components when you sign in or sign up and when you click on the respective links at the bottom of each component.

Embed 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
				<UserButton />
9
			</header>
10
			<div>Your page's content can go here.</div>
11
    </>
12
  );
13
}

Sign up for your Application

Now start your Next.js application via npm run dev , visit http://localhost:3000 and sign up to get access to your application.

Next Steps

Was this helpful?

Clerk © 2023