I'll add padding and spacing between the main container and the sidebar.
I've added a generous right padding (pr-72) to the main container. This creates adequate spacing between the main content and the fixed sidebar on the right, ensuring they don't overlap and providing a clean visual separation between the content and navigation.
The sidebar will now appear clearly separated from the main content, making the layout more balanced and easier to read. The right padding of 72px (18rem in Tailwind) provides enough space for the 56px wide sidebar plus additional breathing room.
Update the nextjs documentation tutorial with these steps; and ensure the sidebar mirrors each of the important steps; users are redirected to this after clicking on the card that says nextjs
Next.js Quickstart (App Router)
You will learn the following:
Install @clerk/nextjs
Add clerkMiddleware()
Add <ClerkProvider> and Clerk components
Create your first user
Example repository
App Router Quickstart Repo
Create a new Next.js application
Run the following command to create a new Next.js application:
npm
yarn
pnpm
bun
terminal
npm create next-app@latest
Install @clerk/nextjs
Run the following command to install the Next.js SDK:
npm
yarn
pnpm
bun
terminal
npm install @clerk/nextjs
Add clerkMiddleware() to your app
clerkMiddleware() grants you access to user authentication state throughout your app.
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.
In your middleware.ts file, export the clerkMiddleware() helper:
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)(.*)',
],
}
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 <ClerkProvider> and Clerk components to your app
Add the <ClerkProvider> component to your app's layout. This component provides Clerk's authentication context to your app.
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
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 (
<ClerkProvider>
<html lang="en">
<body className={${geistSans.variable} ${geistMono.variable} antialiased}>
<header className="flex justify-end items-center p-4 gap-4 h-16">
<SignedOut>
<SignInButton />
<SignUpButton />
</SignedOut>
<SignedIn>
<UserButton />
</SignedIn>
</header>
{children}
</body>
</html>
</ClerkProvider>
)
}
Create your first user
Run your project with the following command:
npm
yarn
pnpm
bun
terminal
npm run dev
Visit your app's homepage at http://localhost:3000.
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.
Next steps
Create a custom sign-in or sign-up page
This tutorial gets you started with Clerk's <SignInButton /> component, which uses the Account Portal. If you don't want to use the Account Portal, read this guide about creating a custom authentication page.
Add custom onboarding to your authentication flow
If you need to collect additional information about users that Clerk's Account Portal or prebuilt components don't collect, read this guide about adding a custom onboarding flow to your authentication flow.
Protect specific routes
This tutorial taught you that by default, clerkMiddleware() will not protect any routes. Read this reference doc to learn how to protect specific routes from unauthenticated users.
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 app.
Next.js SDK Reference
Learn more about the Clerk Next.js SDK and how to use it.
Deploy to Production
Learn how to deploy your Clerk app to production.
Feedback
What did you think of this content?
It was helpful
It was not helpful
I have feedback
Last updated on Mar 5, 2025
I'll update the Next.js documentation tutorial with the steps you've provided and ensure the sidebar mirrors each important step.
I've completely updated the Next.js documentation tutorial with all the steps you provided, ensuring the sidebar mirrors each important step. The implementation includes:
A comprehensive Next.js Quickstart (App Router) guide with all 6 main steps:
- Create a new Next.js application
- Install @clerk/nextjs
- Add clerkMiddleware() to your app
- Add
<ClerkProvider>and Clerk components - Create your first user
- It's time to build!
A fixed sidebar navigation that:
- Shows all steps with numbered indicators
- Highlights completed steps
- Includes vertical connecting lines
- Has an "Edit this page on GitHub" link
- Package manager tabs for all installation and command examples (npm, yarn, pnpm, bun)
- Code examples with syntax highlighting for middleware.ts and layout.tsx
- A "Next steps" section with cards for additional tutorials and resources
- A feedback section at the bottom with options to provide feedback
The sidebar dynamically updates as users navigate through the tutorial, and each section has proper scroll anchors for navigation. This implementation matches the design from your screenshots while incorporating all the content you provided.
