diff --git a/docs/quickstarts/nextjs.mdx b/docs/quickstarts/nextjs.mdx index f13547b425..11e31908d4 100644 --- a/docs/quickstarts/nextjs.mdx +++ b/docs/quickstarts/nextjs.mdx @@ -203,154 +203,215 @@ sdk: nextjs - - ## Create a new Next.js application + + + + ## Create a new Next.js application + + Run the following command to [create a new Next.js application](https://nextjs.org/docs/getting-started/installation). It will create an app with the name `my-clerk-app`, but you can replace it with any name you want. + + + ```bash {{ filename: 'terminal' }} + npm create next-app@latest my-clerk-app -- --yes + ``` + + ```bash {{ filename: 'terminal' }} + yarn create next-app my-clerk-app --yes + ``` + + ```bash {{ filename: 'terminal' }} + pnpm create next-app my-clerk-app --yes + ``` + + ```bash {{ filename: 'terminal' }} + bun create next-app my-clerk-app --yes + ``` + + + ## Install `@clerk/nextjs` + + Run the following command to install the Next.js SDK: + + + ```bash {{ filename: 'terminal' }} + npm install @clerk/nextjs + ``` + + ```bash {{ filename: 'terminal' }} + yarn add @clerk/nextjs + ``` + + ```bash {{ filename: 'terminal' }} + pnpm add @clerk/nextjs + ``` + + ```bash {{ filename: 'terminal' }} + bun add @clerk/nextjs + ``` + + + ## Add `clerkMiddleware()` to your app + + `clerkMiddleware()` grants you access to user authentication state throughout your app. + + 1. Create a `middleware.ts` file. - Run the following command to [create a new Next.js application](https://nextjs.org/docs/getting-started/installation). It will create an app with the name `my-clerk-app`, but you can replace it with any name you want. + - If you're using the `/src` directory, create `middleware.ts` in the `/src` directory. + - If you're not using the `/src` directory, create `middleware.ts` in the root directory. - - ```bash {{ filename: 'terminal' }} - npm create next-app@latest my-clerk-app -- --yes - ``` + 1. In your `middleware.ts` file, export the `clerkMiddleware()` helper: + + ```tsx {{ filename: 'middleware.ts' }} + import { clerkMiddleware } from '@clerk/nextjs/server' + + export default clerkMiddleware() + + export const config = { + matcher: [ + // Skip Next.js internals and all static files, unless found in search params + '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', + // Always run for API routes + '/(api|trpc)(.*)', + ], + } + ``` + + 1. 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](/docs/references/nextjs/clerk-middleware) to learn how to require authentication for specific routes. + + ## Add `` and Clerk components to your app + + 1. Add the [``](/docs/components/clerk-provider) component to your app's layout. This component provides Clerk's authentication context to your app. + 1. Copy and paste the following file into your `layout.tsx` file. This creates a header with Clerk's [prebuilt components](/docs/components/overview) to allow users to sign in and out. + + ```tsx {{ filename: 'app/layout.tsx', mark: [[2, 9], 34, [37, 45], 49] }} + import type { Metadata } from 'next' + import { + ClerkProvider, + SignInButton, + SignUpButton, + SignedIn, + SignedOut, + UserButton, + } from '@clerk/nextjs' + import { Geist, Geist_Mono } from 'next/font/google' + import './globals.css' + + const geistSans = Geist({ + variable: '--font-geist-sans', + subsets: ['latin'], + }) + + const geistMono = Geist_Mono({ + variable: '--font-geist-mono', + subsets: ['latin'], + }) - ```bash {{ filename: 'terminal' }} - yarn create next-app my-clerk-app --yes - ``` - - ```bash {{ filename: 'terminal' }} - pnpm create next-app my-clerk-app --yes - ``` - - ```bash {{ filename: 'terminal' }} - bun create next-app my-clerk-app --yes - ``` - - - ## Install `@clerk/nextjs` - - Run the following command to install the Next.js SDK: - - - ```bash {{ filename: 'terminal' }} - npm install @clerk/nextjs - ``` - - ```bash {{ filename: 'terminal' }} - yarn add @clerk/nextjs - ``` - - ```bash {{ filename: 'terminal' }} - pnpm add @clerk/nextjs - ``` - - ```bash {{ filename: 'terminal' }} - bun add @clerk/nextjs - ``` - - - ## Add `clerkMiddleware()` to your app - - `clerkMiddleware()` grants you access to user authentication state throughout your app. - - 1. Create a `middleware.ts` file. - - - If you're using the `/src` directory, create `middleware.ts` in the `/src` directory. - - If you're not using the `/src` directory, create `middleware.ts` in the root directory. - - 1. In your `middleware.ts` file, export the `clerkMiddleware()` helper: - - ```tsx {{ filename: 'middleware.ts' }} - import { clerkMiddleware } from '@clerk/nextjs/server' - - export default clerkMiddleware() - - export const config = { - matcher: [ - // Skip Next.js internals and all static files, unless found in search params - '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', - // Always run for API routes - '/(api|trpc)(.*)', - ], - } - ``` - - 1. 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](/docs/references/nextjs/clerk-middleware) to learn how to require authentication for specific routes. - - ## Add `` and Clerk components to your app - - 1. Add the [``](/docs/components/clerk-provider) component to your app's layout. This component provides Clerk's authentication context to your app. - 1. Copy and paste the following file into your `layout.tsx` file. This creates a header with Clerk's [prebuilt components](/docs/components/overview) to allow users to sign in and out. - - ```tsx {{ filename: 'app/layout.tsx', mark: [[2, 9], 34, [37, 45], 49] }} - import type { Metadata } from 'next' - import { - ClerkProvider, - SignInButton, - SignUpButton, - SignedIn, - SignedOut, - UserButton, - } from '@clerk/nextjs' - import { Geist, Geist_Mono } from 'next/font/google' - import './globals.css' - - const geistSans = Geist({ - variable: '--font-geist-sans', - subsets: ['latin'], - }) - - const geistMono = Geist_Mono({ - variable: '--font-geist-mono', - subsets: ['latin'], - }) - - export const metadata: Metadata = { - title: 'Clerk Next.js Quickstart', - description: 'Generated by create next app', - } - - export default function RootLayout({ - children, - }: Readonly<{ - children: React.ReactNode - }>) { - return ( - - - -
- - - - - - - - - -
- {children} - - - - ) - } - ``` - - ## 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. - - - ## Next steps - - + export const metadata: Metadata = { + title: 'Clerk Next.js Quickstart', + description: 'Generated by create next app', + } + + export default function RootLayout({ + children, + }: Readonly<{ + children: React.ReactNode + }>) { + return ( + + + +
+ + + + + + + + + +
+ {children} + + + + ) + } + ``` + + ## 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. + + + ## Next steps + + + + + + + ## Create a new Next.js application + + Run the following command to [create a new Next.js application](https://nextjs.org/docs/getting-started/installation). + + + ```bash {{ filename: 'terminal' }} + npm create next-app@latest + ``` + + ```bash {{ filename: 'terminal' }} + yarn create next-app my-clerk-app + ``` + + ```bash {{ filename: 'terminal' }} + pnpm create next-app my-clerk-app + ``` + + ```bash {{ filename: 'terminal' }} + bun create next-app my-clerk-app + ``` + + + ## Install quickstart via shadcn/ui CLI + + + ```bash {{ filename: 'terminal' }} + npx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json + ``` + + ```bash {{ filename: 'terminal' }} + pnpm dlx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json + ``` + + ```bash {{ filename: 'terminal' }} + yarn shadcn@latest add https://clerk.com/r/nextjs-quickstart.json + ``` + + ```bash {{ filename: 'terminal' }} + bunx --bun shadcn@latest add https://clerk.com/r/nextjs-quickstart.json + ``` + + + ## Create your first user + + + + ## Next steps + + + - [Install Clerk with shadcn/ui CLI](/docs/references/nextjs/shadcn) + - Learn how to install Clerk with the shadcn/ui CLI. + + + +