Next.js Quickstart (App Router) (original) (raw)

Install @clerk/nextjs

Run the following command to install the Next.js 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:
    proxy.ts
  3. By default, clerkMiddleware() will not protect any routes. All routes are public and you must opt-in to protection for routes. See the clerkMiddleware() reference to learn how to require authentication for specific routes.

Add and Clerk components to your app

  1. Add the component to your app's layout. This component provides Clerk's authentication context to your app.
  2. Copy and paste the following file into your layout.tsx file. This creates a header with Clerk's prebuilt components to allow users to sign in and out.

app/layout.tsx

Create your first user

  1. Run your project with the following command:
  2. Click "Sign up" in the header and authenticate to create your first user.

It's time to build!

You've added Clerk to your Next.js app 🎉. From here, you can continue developing your application.

To make configuration changes to your Clerk development instance, claim the Clerk keys that were generated for you by selecting Claim your application in the bottom right of your app. This will associate the application with your Clerk account.