Example: update with-clerk

examples/with-clerk/.env.local.example

@@ -1,7 +1,5 @@
-NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
-CLERK_SECRET_KEY=your_clerk_secret_key
+# Rename it to .env.local when implementing with clerk secret key
+
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
+CLERK_SECRET_KEY=YOUR_SECRET_KEY
 
-NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
-NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
-NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
-NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

examples/with-clerk/.gitignore

@@ -28,9 +28,10 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
-# local env files
-.env*.local
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel

examples/with-clerk/README.md

@@ -1,20 +1,16 @@
-# Clerk and Next.js Example
+# Clerk & Nextjs Example
 
-This example shows how to use [Clerk](https://www.clerk.dev/?utm_source=github&utm_medium=nextjs-examples&utm_campaign=nextjs) with Next.js. The example features adding sign up, sign in, profile management, and an authenticated API route to your Next.js application.
-
-## Demo
-
-A hosted demo of this example is available at [clerk-app-router.clerkpreview.com](https://clerk-app-router.clerkpreview.com/).
+This example demonstrates how to set up Clerk authentication in a Next.js application.
 
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-clerk)
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-clerk&integration-ids=oac_7uYNbc9CdDAZmNqbt3LEkO3a)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-clerk&project-name=with-clerk&repository-name=with-clerk)
 
 ## How to use
 
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), [pnpm](https://pnpm.io), or [Bun](https://bun.sh/docs/cli/bunx) to bootstrap the example:
 
 ```bash
 npx create-next-app --example with-clerk with-clerk-app
@@ -28,18 +24,8 @@ yarn create next-app --example with-clerk with-clerk-app
 pnpm create next-app --example with-clerk with-clerk-app
 ```
 
-To run the example locally you need to:
-
-1. Sign up at [Clerk.dev](https://www.clerk.dev/?utm_source=github&utm_medium=starter_repos&utm_campaign=nextjs_starter).
-2. Go to [Clerk's dashboard](https://dashboard.clerk.dev/?utm_source=github&utm_medium=starter_repos&utm_campaign=nextjs_starter) and create an application.
-3. Set the required Clerk environment variables from your Clerk project as shown at [the example env file](./.env.local.example).
-4. `yarn` to install the required dependencies.
-5. `yarn dev` to launch the development server.
-
-## Learn More
-
-To learn more about Clerk.dev and Next.js, take a look at the following resources:
+```bash
+bunx create-next-app --example with-clerk with-clerk-app
+```
 
-- [Quick start](https://docs.clerk.dev/get-started/nextjs)
-- [Clerk.dev Documentation](https://docs.clerk.dev/) - learn about Clerk.dev features and API.
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/app/building-your-application/deploying)).

examples/with-clerk/app/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}

examples/with-clerk/app/layout.tsx

@@ -1,53 +1,51 @@
-import "../styles/globals.css";
-import { ClerkProvider, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
-import { Inter } from "next/font/google";
-import Image from "next/image";
-import Script from "next/script";
-import styles from "../styles/Header.module.css";
-import Link from "next/link";
 import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import {
+  ClerkProvider,
+  SignInButton,
+  SignedIn,
+  SignedOut,
+  UserButton,
+} from "@clerk/nextjs";
 
-const inter = Inter({ subsets: ["latin"] });
+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 with App Router",
-  description: "Power your Next.js application with Clerk ",
+  title: "Create Next App",
+  description: "Generated by create next app",
 };
 
-const Header = () => (
-  <header className={styles.header}>
-    <div className={styles.left}>
-      <Link href="/" className={styles.logo}>
-        <Image src="/logo.svg" width="32" height="32" alt="Logo" />
-        <span className={styles.appName}>Your application</span>
-      </Link>
-    </div>
-    <div className={styles.right}>
-      <SignedOut>
-        <Link href="/sign-in">Sign in</Link>
-      </SignedOut>
-      <SignedIn>
-        <UserButton afterSignOutUrl="/" />
-      </SignedIn>
-    </div>
-  </header>
-);
-
 export default function RootLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) {
   return (
-    <html lang="en">
-      <ClerkProvider>
-        <body className={inter.className}>
-          <Header />
-          <main>{children}</main>
+    <ClerkProvider>
+      <html lang="en">
+        <body
+          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        >
+          <header>
+            <SignedOut>
+              <SignInButton />
+            </SignedOut>
+            <SignedIn>
+              <UserButton />
+            </SignedIn>
+          </header>
+          {children}
         </body>
-      </ClerkProvider>
-      <Script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js" />
-      <Script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js" />
-    </html>
+      </html>
+    </ClerkProvider>
   );
 }