Skip to content

Commit e20d1b3

Browse files
alexisintechalexisintech
committed
align with new quickstart
1 parent 46b65f6 commit e20d1b3

21 files changed

+836
-3891
lines changed

‎.env.local.example‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎.eslintrc.json‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎.gitignore‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@
33
# dependencies
44
/node_modules
55
/.pnp
6-
.pnp.js
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
712

813
# testing
914
/coverage
@@ -23,13 +28,17 @@
2328
npm-debug.log*
2429
yarn-debug.log*
2530
yarn-error.log*
31+
.pnpm-debug.log*
2632

27-
# local env files
28-
.env*.local
33+
# env files (can opt-in for committing if needed)
34+
.env*
2935

3036
# vercel
3137
.vercel
3238

3339
# typescript
3440
*.tsbuildinfo
3541
next-env.d.ts
42+
43+
# clerk configuration (can include secrets)
44+
/.clerk/

‎README.md‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
</p>
1010
<div align="center">
1111
<h1>
12-
Clerk and Next.js App Router Quickstart
13-
</h1>
12+
Clerk and Next.js App Router Quickstart
13+
</h1>
1414
<a href="https://www.npmjs.com/package/@clerk/clerk-js">
1515
<img alt="Downloads" src="https://img.shields.io/npm/dm/@clerk/clerk-js" />
1616
</a>
@@ -19,7 +19,7 @@
1919
</a>
2020
<a href="https://twitter.com/clerkdev">
2121
<img alt="Twitter" src="https://img.shields.io/twitter/url.svg?label=%40clerkdev&style=social&url=https%3A%2F%2Ftwitter.com%2Fclerkdev" />
22-
</a>
22+
</a>
2323
<br />
2424
<br />
2525
<img alt="Clerk Hero Image" src="./public/hero.png">
@@ -32,9 +32,9 @@ Clerk is a developer-first authentication and user management solution. It provi
3232
After following the quickstart you'll have learned how to:
3333

3434
- Install `@clerk/nextjs`
35-
- Set your Clerk API keys
36-
- Add Clerk's middleware
35+
- Add `clerkMiddleware()`
3736
- Add `<ClerkProvider />` and Clerk components
37+
- Create your first user
3838

3939
## Deploy
4040

@@ -50,15 +50,9 @@ git clone https://github.com/clerk/clerk-nextjs-app-quickstart
5050

5151
To run the example locally, you need to:
5252

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-app-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-app-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. You may need to use `--force` to handle dependency issues from the React release candidate.
60-
61-
5. `npm run dev` to launch the development server.
53+
1. `npm install` the required dependencies. You may need to use `--force` to handle dependency issues from the React release candidate.
54+
1. `npm run dev` to launch the development server.
55+
1. Select the "Sign in" button in the top-right corner of the app's homepage.
6256

6357
## Learn more
6458

‎app/globals.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
5+
:root {
6+
--background: #ffffff;
7+
--foreground: #171717;
8+
}
9+
10+
@media (prefers-color-scheme: dark) {
11+
:root {
12+
--background: #0a0a0a;
13+
--foreground: #ededed;
14+
}
15+
}
16+
17+
body {
18+
color: var(--foreground);
19+
background: var(--background);
20+
font-family: Arial, Helvetica, sans-serif;
21+
}

‎app/layout.tsx‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,44 @@
1-
import {
2-
ClerkProvider,
3-
SignInButton,
4-
SignedIn,
5-
SignedOut,
6-
UserButton,
7-
} from "@clerk/nextjs";
8-
import "./globals.css";
1+
import type { Metadata } from 'next'
2+
import { ClerkProvider, SignInButton, SignUpButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
3+
import { Geist, Geist_Mono } from 'next/font/google'
4+
import './globals.css'
5+
6+
const geistSans = Geist({
7+
variable: '--font-geist-sans',
8+
subsets: ['latin'],
9+
})
10+
11+
const geistMono = Geist_Mono({
12+
variable: '--font-geist-mono',
13+
subsets: ['latin'],
14+
})
15+
16+
export const metadata: Metadata = {
17+
title: 'Clerk Next.js Quickstart',
18+
description: 'Generated by create next app',
19+
}
920

1021
export default function RootLayout({
1122
children,
12-
}: {
13-
children: React.ReactNode;
14-
}) {
23+
}: Readonly<{
24+
children: React.ReactNode
25+
}>) {
1526
return (
1627
<ClerkProvider>
1728
<html lang="en">
18-
<body>
19-
<header>
29+
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
30+
<header className="flex justify-end items-center p-4 gap-4 h-16">
2031
<SignedOut>
2132
<SignInButton />
33+
<SignUpButton />
2234
</SignedOut>
23-
2435
<SignedIn>
2536
<UserButton />
2637
</SignedIn>
2738
</header>
28-
29-
<main>{children}</main>
39+
{children}
3040
</body>
3141
</html>
3242
</ClerkProvider>
33-
);
43+
)
3444
}

‎app/page.tsx‎

Lines changed: 99 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,101 @@
1+
import Image from "next/image";
2+
13
export default function Home() {
2-
return <div>Home Page</div>;
4+
return (
5+
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
6+
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
7+
<Image
8+
className="dark:invert"
9+
src="/next.svg"
10+
alt="Next.js logo"
11+
width={180}
12+
height={38}
13+
priority
14+
/>
15+
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
16+
<li className="mb-2">
17+
Get started by editing{" "}
18+
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
19+
app/page.tsx
20+
</code>
21+
.
22+
</li>
23+
<li>Save and see your changes instantly.</li>
24+
</ol>
25+
26+
<div className="flex gap-4 items-center flex-col sm:flex-row">
27+
<a
28+
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
29+
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
30+
target="_blank"
31+
rel="noopener noreferrer"
32+
>
33+
<Image
34+
className="dark:invert"
35+
src="/vercel.svg"
36+
alt="Vercel logomark"
37+
width={20}
38+
height={20}
39+
/>
40+
Deploy now
41+
</a>
42+
<a
43+
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
44+
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
45+
target="_blank"
46+
rel="noopener noreferrer"
47+
>
48+
Read our docs
49+
</a>
50+
</div>
51+
</main>
52+
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
53+
<a
54+
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
55+
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
>
59+
<Image
60+
aria-hidden
61+
src="/file.svg"
62+
alt="File icon"
63+
width={16}
64+
height={16}
65+
/>
66+
Learn
67+
</a>
68+
<a
69+
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
70+
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
71+
target="_blank"
72+
rel="noopener noreferrer"
73+
>
74+
<Image
75+
aria-hidden
76+
src="/window.svg"
77+
alt="Window icon"
78+
width={16}
79+
height={16}
80+
/>
81+
Examples
82+
</a>
83+
<a
84+
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
85+
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
86+
target="_blank"
87+
rel="noopener noreferrer"
88+
>
89+
<Image
90+
aria-hidden
91+
src="/globe.svg"
92+
alt="Globe icon"
93+
width={16}
94+
height={16}
95+
/>
96+
Go to nextjs.org →
97+
</a>
98+
</footer>
99+
</div>
100+
);
3101
}

‎middleware.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { clerkMiddleware } from "@clerk/nextjs/server";
1+
import { clerkMiddleware } from '@clerk/nextjs/server'
22

33
// This Middleware does not protect any routes by default.
44
// See https://clerk.com/docs/references/nextjs/clerk-middleware for more information about configuring your Middleware
5-
export default clerkMiddleware();
5+
export default clerkMiddleware()
66

77
export const config = {
88
matcher: [
99
// Skip Next.js internals and all static files, unless found in search params
10-
"/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
10+
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
1111
// Always run for API routes
12-
"/(api|trpc)(.*)",
12+
'/(api|trpc)(.*)',
1313
],
14-
};
14+
}

‎next.config.js‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎next.config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type { NextConfig } from "next";
2+
3+
const nextConfig: NextConfig = {
4+
/* config options here */
5+
};
6+
7+
export default nextConfig;

0 commit comments

Comments
 (0)