Next.js Quickstart
Next.js Quickstart
You will learn the following:
- Install
@clerk/nextjs
- Set up your environment keys to test your app locally
- Add
<ClerkProvider />
to your application - Use Clerk middleware to implement route-specific authentication
- Create a header with Clerk components for users to sign in and out
Before you start
Example repositories
Install @clerk/nextjs
Clerk's Next.js SDK has prebuilt components, React hooks, and helpers to make user authentication easier.
To get started using Clerk with Next.js, add the SDK to your project:
Add Middleware to your application
clerkMiddleware()
grants you access to user authentication state throughout your application, on any route or page. It also allows you to protect specific routes from unauthenticated users. To add clerkMiddleware()
to your application, follow these steps:
-
Create a
middleware.ts
file.- If you're using the
/src
directory, placemiddleware.ts
in the/src
directory. - If you're not using the
/src
directory, placemiddleware.ts
in the root directory alongside.env.local
.
- If you're using the
-
In your middleware.ts, export Clerk's
clerkMiddleware()
helper:
- By default,
clerkMiddleware()
will not protect any routes. All routes are public and you must opt-in to protection for routes. See theclerkMiddleware()
reference to learn how to require authentication for specific routes.
Add <ClerkProvider>
and components to your app
All Clerk hooks and components must be children of the <ClerkProvider>
component, which provides active session and user context.
You can control which content signed in and signed out users can see with Clerk's prebuilt components. To get started, create a header for your users to sign in or out. To do this, you will use:
<SignedIn>
: Children of this component can only be seen while signed in.<SignedOut>
: Children of this component can only be seen while signed out.<UserButton />
: A prebuilt component that comes styled out of the box to show the avatar from the account the user is signed in with.<SignInButton />
: An unstyled component that links to the sign-in page or displays the sign-in modal.
Select your preferred router to learn how to make this data available across your entire app:
Protect routes using Clerk Middleware
Learn how to protect specific routes from unauthenticated users.
Create custom sign-up and sign-in pages
Learn how add custom sign-up and sign-in pages with Clerk components.
Read user and session data
Learn how to use Clerk's hooks and helpers to access the active session and user data in your Next.js application.
Client Side Helpers
Learn more about Next.js client side helpers and how to use them.
Next.js SDK Reference
Learn more about additional Next.js methods.
Deploy to Production
Learn how to deploy your Clerk app to production.
Deploy to Vercel
Learn how to deploy your Clerk app to production on Vercel.
Clerk + Next.js App Router Quickstart Repo
The official companion repo for Clerk's Next.js Quickstart using App Router.
Clerk + Next.js Pages Router Quickstart Repo
The official companion repo for Clerk's Next.js Quickstart using Pages Router.
Feedback
Last updated on