Install @clerk/nextjs

The Clerk Next.js SDK gives you access to prebuilt components, hooks, and helpers to make user authentication easier.

Run the following command to install the SDK:

1. Create a proxy.ts file.

   • If you're using the /src directory, create proxy.ts in the /src directory.
   • If you're not using the /src directory, create proxy.ts in the root directory.

2. In your proxy.ts file, export the clerkMiddleware() helper:

3. By default, clerkMiddleware() will not protect any routes. All routes are public and you must opt-in to protection. To require a signed-in user, protect resources close to where they're used, as shown in the guide on protecting content.

Add <ClerkProvider> and Clerk components to your app

The <ClerkProvider> component provides session and user context to Clerk's hooks and components. It's recommended to wrap your entire app at the entry point with <ClerkProvider> to make authentication globally accessible. See the reference docs for other configuration options.

Copy and paste the following code into your layout.tsx file. This:

• Adds the <ClerkProvider> component to your app's layout, providing Clerk's authentication context to your app.
• Creates a header with Clerk's prebuilt components to allow users to sign in and out, and display different content for signed-in and signed-out users.

Create your first user

1. Visit your app's homepage at http://localhost:3000.
2. Select "Sign up" on the page and authenticate to create your first user.