Meta tags:
description=Add authentication and user management to your Next.js app with Clerk.;

Headings (most frequently used words):

your, app, next, clerk, to, js, create, add, components, user, quickstart, router, example, repository, new, install, nextjs, set, api, keys, clerkmiddleware, clerkprovider, and, run, project, first, steps, more, explore, feedback, prebuilt, build, custom, flows, read, data, customization, localization,

Text of the page (most frequently used words):
the (46), clerk (43), your (36), next (26), app (26), and (23), nextjs (16), create (14), you (13), user (13), this (12), sign (11), for (10), add (10), run (10), signed (10), api (9), keys (9), react (8), authentication (8), #components (8), following (8), page (8), component (8), clerkprovider (8), clerkmiddleware (8), install (8), yarn (7), pnpm (7), npm (7), show (7), copy (7), router (7), from (6), using (6), management (6), sdk (6), dashboard (6), bun (6), quickstart (6), file (6), proxy (6), started (6), billing (5), new (5), that (5), how (5), prebuilt (5), with (5), account (5), children (5), out (5), cursor (5), export (5), import (5), prompt (5), getting (5), not (4), resources (4), content (4), access (4), are (4), explore (4), learn (4), steps (4), can (4), key (4), dev (4), links (4), example (4), set (4), signupbutton (4), when (4), font (4), variable (4), default (4), const (4), geist (4), routes (4), directory (4), yes (4), open (4), core (4), use (3), all (3), expo (3), manage (3), build (3), application (3), guides (3), make (3), first (3), project (3), portal (3), signinbutton (3), userbutton (3), only (3), html (3), header (3), text (3), classname (3), metadata (3), layout (3), docs (3), always (3), src (3), env (3), 2026 (2), legal (2), terms (2), documentation (2), sdks (2), cli (2), b2b (2), github (2), have (2), feedback (2), was (2), helpful (2), waitlist (2), control (2), features (2), organizations (2), shared (2), more (2), helpers (2), read (2), data (2), custom (2), flows (2), configuration (2), changes (2), development (2), generated (2), selecting (2), will (2), any (2), secret (2), publishable (2), important (2), select (2), command (2), unstyled (2), since (2), props (2), url (2), environment (2), variables (2), options (2), seen (2), while (2), body (2), button (2), geistmono (2), geistsans (2), latin (2), subsets (2), geist_mono (2), css (2), tsx (2), users (2), context (2), paste (2), code (2), into (2), session (2), hooks (2), other (2), reference (2), protect (2), skip (2), search (2), instead (2), follow (2), these (2), icon (2), pages (2), tauri (2), svelte (2), solidjs (2), rust (2), koa (2), hono (2), elysia (2), angular (2), vue (2), ruby (2), rails (2), sinatra (2), remix (2), python (2), php (2), nuxt (2), javascript (2), backend (2), java (2), ios (2), fastify (2), chrome (2), extension (2), astro (2), android (2), express (2), tanstack (2), start (2), support, inc, cookie, manager, sell, share, info, website, privacy, policy, conditions, brand, assets, contact, blog, careers, about, company, llm, leaderboard, students, startups, feature, requests, glossary, changelog, view, product, edit, last, updated, jul, what, did, think, lets, collect, signups, products, before, launch, through, simple, integrated, workflow, enables, subscriptions, free, trials, payments, plans, related, webhook, events, b2c, applications, accounts, let, teams, collaborate, members, roles, additional, help, grow, customize, localize, customization, localization, interfaces, entirely, scratch, most, relevant, instance, claim, were, bottom, right, associate, once, claimed, find, time, configure, authenticate, visit, homepage, http, localhost, 3000, shows, avatar, opens, dropdown, menu, uses, 6c47ff, white, rounded, full, medium, base, pointer, flex, justify, end, items, center, gap, antialiased, lang, return, reactnode, readonly, rootlayout, function, description, title, mono, sans, lines, collapsed, globals, google, type, creates, allow, display, different, adds, providing, provides, recommended, wrap, entire, entry, point, globally, accessible, see, public, must, opt, protection, require, close, where, they, used, shown, guide, protecting, __clerk, specific, frontend, trpc, _next, jpe, webp, png, gif, svg, ttf, woff2, ico, csv, docx, xlsx, zip, webmanifest, internals, static, files, unless, found, params, matcher, config, server, helper, root, name, itself, remains, same, filename, middleware, grants, state, throughout, your_secret_key, clerk_secret_key, your_publishable_key, next_public_clerk_publishable_key, final, result, should, resemble, section, quick, navigate, retrieved, gives, easier, bunx, latest, don, already, commands, one, apps, note, repo, repository, get, faster, available, works, securing, customizing, organization, ask, main,

Text of the page (random words):
next js quickstart app router getting started clerk docs skip to main content docs core 3 core 3 core 2 core 1 search documentation ask ai dashboard dashboard sign up sign up next js react expo tanstack react start react router express android astro chrome extension c fastify go ios java js backend sdk javascript nuxt php python remix ruby rails sinatra vue angular elysia hono koa rust solidjs svelte tauri select your sdk next js react expo tanstack react start react router express android astro chrome extension c fastify go ios java js backend sdk javascript nuxt php python remix ruby rails sinatra vue angular elysia hono koa rust solidjs svelte tauri guides reference getting started getting started getting started authentication flows user management session management organization management billing management account portal customizing clerk securing your app ai cli development clerk dashboard how clerk works guides getting started next js quickstart app router create a new next js app install clerk nextjs set your clerk api keys add clerkmiddleware to your app add clerkprovider and clerk components to your app run your project create your first user next steps more to explore available in other sdks use this prebuilt prompt to get started faster open in cursor open in cursor open in cursor open in cursor copy prompt copy prompt copy prompt copy prompt example repository next js app router quickstart repo note this is the default quickstart for new next js apps using pages router follow the pages router quickstart instead create a new next js app if you don t already have a next js app run the following commands to create a new one npm pnpm yarn bun npm create next app latest clerk nextjs yes cd clerk nextjs npm install pnpm create next app clerk nextjs yes cd clerk nextjs pnpm install yarn create next app clerk nextjs yes cd clerk nextjs yarn install bunx create next app clerk nextjs yes cd clerk nextjs bun install install clerk nextjs the clerk next js sdk next js icon gives you access to prebuilt components hooks and helpers to make user authentication easier run the following command to install the sdk npm pnpm yarn bun npm install clerk nextjs pnpm add clerk nextjs yarn add clerk nextjs bun add clerk nextjs set your clerk api keys add the following keys to your env file these keys can always be retrieved from the api keys page in the clerk dashboard in the clerk dashboard navigate to the api keys page in the quick copy section copy your clerk publishable key and secret key paste your keys into your env file the final result should resemble the following env next_public_clerk_publishable_key your_publishable_key clerk_secret_key your_secret_key add clerkmiddleware to your app clerkmiddleware next js icon grants you access to user authentication state throughout your app to add clerkmiddleware to your app follow these steps important if you re using next js 15 name your file middleware ts instead of proxy ts the code itself remains the same only the filename changes 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 in your proxy ts file export the clerkmiddleware helper proxy 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 always run for clerk specific frontend api routes __clerk 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 app layout tsx import type metadata from next import clerkprovider show signinbutton signupbutton userbutton from clerk nextjs import geist geist_mono from next font google import globals css 14 lines collapsed 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 html lang en body classname geistsans variable geistmono variable antialiased clerkprovider header classname flex justify end items center p 4 gap 4 h 16 show when signed out signinbutton signupbutton button classname bg 6c47ff text white rounded full font medium text sm sm text base h 10 sm h 12 px 4 sm px 5 cursor pointer sign up button signupbutton show show when signed in userbutton show header children clerkprovider body html this example uses the following components show when signed in children of this component can only be seen while signed in show when signed out children of this component can only be seen while signed out userbutton shows the signed in user s avatar selecting it opens a dropdown menu with account management options signinbutton an unstyled component that links to the sign in page in this example since no props or environment variables are set for the sign in url this component links to the account portal sign in page signupbutton an unstyled component that links to the sign up page in this example since no props or environment variables are set for the sign up url this component links to the account portal sign up page run your project run your project with the following command npm pnpm yarn bun npm run dev pnpm run dev yarn dev bun run dev create your first user visit your app s homepage at http localhost 3000 select sign up on the page and authenticate to create your first user important to make configuration changes to your clerk development instance claim the clerk keys that were generated for you by selecting configure your application in the bottom right of your app this will associate the application with your clerk account once claimed you can find your publishable key and secret key any time on the api keys page in the clerk dashboard next steps explore the most relevant next steps for your sdk using the following guides prebuilt components learn how to add clerk s prebuilt authentication and user management ui to your app build custom flows learn how to build custom user interfaces entirely from scratch using the clerk api read user data learn how to use clerk s helpers to read user data in your app customization localization learn how to customize and localize clerk components more to explore explore additional clerk features that help you build manage and grow your application organizations organizations are shared accounts that let teams collaborate manage members and roles and control access to shared resources billing billing enables you to manage subscriptions free trials payments plans and billing related webhook events for b2c and b2b applications waitlist waitlist lets you collect signups and control access to new products or features before launch through a simple integrated workflow feedback what did you think of this content it was helpful it was not helpful i have feedback last updated on jul 8 2026 github edit on github product authentication b2b authentication billing cli sdks react next js expo view all resources documentation changelog glossary feature requests startups students llm leaderboard company about careers blog contact brand assets legal terms and conditions privacy policy website terms of use legal resources do not sell share my info cookie manager 2026 clerk inc support