Clerk Next.js App Router Quickstart

This quickstart template demonstrates how to integrate Clerk authentication into a Next.js application using the App Router. By following this pattern, you will learn how to:

1. Install the @clerk/nextjs SDK.
2. Implement clerkMiddleware() to protect routes.
3. Wrap your application with <ClerkProvider /> and use pre-built Clerk components (e.g., for sign-in, sign-up, and user profiles).
4. Manage user sessions and create users.

You can deploy this template to Vercel. When deploying, you must configure the following required environment variables in your Vercel dashboard:

• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY

To run this template on your local machine, follow these steps:

1. Clone the repository:

   git clone https://github.com/clerk/clerk-nextjs-app-quickstart

2. Install dependencies using pnpm:

   pnpm install

3. Start the development server:

   pnpm run dev

4. Open the application and select the "Sign in" button in the top-right corner to test the authentication flow.

This project uses the new ESLint flat config format via eslint/config. It integrates Next.js Core Web Vitals rules and TypeScript support by spreading eslint-config-next/core-web-vitals and eslint-config-next/typescript into the configuration array.

To customize which files are globally ignored (overriding the defaults provided by eslint-config-next), use the globalIgnores function within defineConfig.

import { defineConfig, globalIgnores } from 'eslint/config'
import nextVitals from 'eslint-config-next/core-web-vitals'
import nextTs from 'eslint-config-next/typescript'

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  globalIgnores([
    '.next/**',
    'out/**',
    'build/**',
    'next-env.d.ts',
  ]),
])

export default eslintConfig