27 |
28 | ## Introduction
29 |
30 | Clerk is a developer-first authentication and user management solution. It provides pre-built React components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be dropped into any React or Next.js application.
31 |
32 | After following the quickstart you'll have learned how to:
33 |
34 | - Install `@clerk/nextjs`
35 | - Set your Clerk API keys
36 | - Add Clerk's middleware
37 | - Add `` and Clerk components
38 |
39 | ## Deploy
40 |
41 | Easily deploy the template to Vercel with the button below. You will need to set the required environment variables in the Vercel dashboard.
42 |
43 | [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fclerk%2Fclerk-nextjs-pages-quickstart&env=NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,CLERK_SECRET_KEY&envDescription=Clerk%20API%20keys&envLink=https%3A%2F%2Fclerk.com%2Fdocs%2Fquickstart%2Fnextjs&redirect-url=https%3A%2F%2Fclerk.com%2Fdocs%2Fquickstart%2Fnextjs)
44 |
45 | ## Running the template
46 |
47 | ```bash
48 | git clone https://github.com/clerk/clerk-nextjs-pages-quickstart
49 | ```
50 |
51 | To run the example locally, you need to:
52 |
53 | 1. Sign up for a Clerk account at [https://clerk.com](https://dashboard.clerk.com/sign-up?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=clerk-nextjs-pages-quickstart).
54 |
55 | 2. Go to the [Clerk dashboard](https://dashboard.clerk.com?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=clerk-nextjs-pages-quickstart) and create an application.
56 |
57 | 3. Set the required Clerk environment variables as shown in [the example `env.local.example` file](./.env.local.example).
58 |
59 | 4. `npm install` the required dependencies.
60 |
61 | 5. `npm run dev` to launch the development server.
62 |
63 | ## Learn more
64 |
65 | To learn more about Clerk and Next.js, check out the following resources:
66 |
67 | - [Quickstart: Get started with Next.js and Clerk](https://clerk.com/docs/quickstarts/nextjs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=clerk-nextjs-pages-quickstart)
68 |
69 | - [Clerk Documentation](https://clerk.com/docs?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=clerk-nextjs-pages-quickstart)
70 | - [Next.js Documentation](https://nextjs.org/docs)
71 |
72 | ## Found an issue?
73 |
74 | If you have found an issue with the quickstart, please create an [issue](https://github.com/clerk/clerk-nextjs-pages-quickstart/issues).
75 |
76 | If it's a quick fix, such as a misspelled word or a broken link, feel free to skip creating an issue.
77 | Go ahead and create a [pull request](https://github.com/clerk/clerk-nextjs-pages-quickstart/pulls) with the solution. :rocket:
78 |
79 | ## Want to leave feedback?
80 |
81 | Feel free to create an [issue](https://github.com/clerk/clerk-nextjs-pages-quickstart/issues) with the **feedback** label. Our team will take a look at it and get back to you as soon as we can!
82 |
83 | ## Connect with us
84 |
85 | You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).
86 |
87 | If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:support@clerk.dev) us!
88 |
--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
1 | import { clerkMiddleware } from "@clerk/nextjs/server";
2 |
3 | export default clerkMiddleware();
4 |
5 | export const config = {
6 | matcher: [
7 | // Skip Next.js internals and all static files, unless found in search params
8 | "/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
9 | // Always run for API routes
10 | "/(api|trpc)(.*)",
11 | ],
12 | };
13 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | }
5 |
6 | module.exports = nextConfig
7 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "clerk-nextjs-quickstart-pages-router",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@clerk/nextjs": "^6.12.8",
13 | "next": "^15.2.3",
14 | "react": "^19.0.0",
15 | "react-dom": "^19.0.0"
16 | },
17 | "devDependencies": {
18 | "@types/node": "^22.8.6",
19 | "@types/react": "^18.3.12",
20 | "@types/react-dom": "^18.3.1",
21 | "autoprefixer": "^10.4.20",
22 | "eslint": "^9.13.0",
23 | "eslint-config-next": "^15.0.2",
24 | "postcss": "^8.4.47",
25 | "tailwindcss": "^3.4.14",
26 | "typescript": "^5.6.3"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '@/styles/globals.css';
2 | import {
3 | ClerkProvider,
4 | SignInButton,
5 | SignedIn,
6 | SignedOut,
7 | UserButton,
8 | } from '@clerk/nextjs';
9 | import type { AppProps } from 'next/app';
10 |
11 | function MyApp({ Component, pageProps }: AppProps) {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | );
26 | }
27 |
28 | export default MyApp;
29 |
--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import { Html, Head, Main, NextScript } from 'next/document'
2 |
3 | export default function Document() {
4 | return (
5 |
6 |
6 | 
16 |
17 |
18 | 
19 |
20 |
21 | 
22 |
23 | 
26 |