diff --git a/nextjs/clerk/README.md b/nextjs/clerk/README.md index 626bd55..b1f3157 100644 --- a/nextjs/clerk/README.md +++ b/nextjs/clerk/README.md @@ -36,12 +36,6 @@ After following the quickstart you'll have learned how to: - Add `` and Clerk components - Create your first user -## Deploy - -Easily deploy the template to Vercel with the button below. You will need to set the required environment variables in the Vercel dashboard. - -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fclerk%2Fclerk-nextjs-app-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) - ## Running the template ```bash diff --git a/nextjs/clerk/app/favicon.ico b/nextjs/clerk/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/nextjs/clerk/app/favicon.ico differ diff --git a/nextjs/clerk/app/globals.css b/nextjs/clerk/app/globals.css new file mode 100644 index 0000000..b65a368 --- /dev/null +++ b/nextjs/clerk/app/globals.css @@ -0,0 +1,19 @@ +@import 'tailwindcss'; + +: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; +} diff --git a/nextjs/clerk/app/layout.tsx b/nextjs/clerk/app/layout.tsx new file mode 100644 index 0000000..4eabbd3 --- /dev/null +++ b/nextjs/clerk/app/layout.tsx @@ -0,0 +1,44 @@ +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 ( + + + +
+ + + + + + + +
+ {children} + + + + ) +} diff --git a/nextjs/clerk/app/page.tsx b/nextjs/clerk/app/page.tsx new file mode 100644 index 0000000..deab729 --- /dev/null +++ b/nextjs/clerk/app/page.tsx @@ -0,0 +1,101 @@ +import Image from "next/image"; + +export default function Home() { + return ( +
+
+ Next.js logo +
    +
  1. + Get started by editing{" "} + + app/page.tsx + + . +
    2. +
  2. Save and see your changes instantly.
    3. +
+ +
+ + Vercel logomark + Deploy now + + + Read our docs + +
+
+ +
+ ); +}