clerk example project updated (#8278)

Author: aidankmcalister

orm/clerk-nextjs/.gitignore

@@ -21,10 +21,8 @@
 /build
 
 # misc
-**/generated/prisma
 .DS_Store
 *.pem
-prisma/dev.db*
 
 # debug
 npm-debug.log*
@@ -43,5 +41,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# clerk configuration (can include secrets)
-/.clerk/
+/app/generated/prisma

orm/clerk-nextjs/README.md

@@ -43,6 +43,7 @@ This example uses a [Prisma Postgres](https://prisma.io/postgres) database by de
 
 1. Set up a new Prisma Postgres instance in the [Prisma Data Platform Console](https://console.prisma.io) and copy the database connection URL.
 2. Add your database url to the `.env`
+3. Run `npx prisma migrate dev --name init`
 
 That's it, your project is now configured to use Prisma Postgres!
 

…/clerk-nextjs/src/app/api/posts/route.ts orm/clerk-nextjs/app/api/posts/route.tsorm/clerk-nextjs/src/app/api/posts/route.ts renamed to orm/clerk-nextjs/app/api/posts/route.ts orm/clerk-nextjs/src/app/api/posts/route.ts renamed to orm/clerk-nextjs/app/api/posts/route.ts

@@ -0,0 +1,30 @@
+import { verifyWebhook } from '@clerk/nextjs/webhooks'
+import { NextRequest } from 'next/server'
+import prisma from '@/lib/prisma'
+
+export async function POST(req: NextRequest) {
+  try {
+    const evt = await verifyWebhook(req)
+    const { id } = evt.data
+    const eventType = evt.type
+    console.log(`Received webhook with ID ${id} and event type of ${eventType}`)
+
+    if (eventType === 'user.created') {
+      const { id, email_addresses, first_name, last_name } = evt.data
+      await prisma.user.upsert({
+        where: { clerkId: id },
+        update: {},
+        create: {
+          clerkId: id,
+          email: email_addresses[0].email_address,
+          name: `${first_name} ${last_name}`,
+        },
+      })
+    }
+
+    return new Response('Webhook received', { status: 200 })
+  } catch (err) {
+    console.error('Error verifying webhook:', err)
+    return new Response('Error verifying webhook', { status: 400 })
+  }
+}

orm/clerk-nextjs/app/api/webhooks/clerk/route.ts

@@ -1,24 +1,24 @@
-'use client'
+"use client";
 
-import { useState } from 'react'
+import { useState } from "react";
 
 export default function PostInputs() {
-  const [title, setTitle] = useState('')
-  const [content, setContent] = useState('')
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
 
   async function createPost(e: React.FormEvent) {
-    e.preventDefault()
-    if (!title || !content) return
+    e.preventDefault();
+    if (!title || !content) return;
 
-    await fetch('/api/posts', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+    await fetch("/api/posts", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ title, content }),
-    })
+    });
 
-    setTitle('')
-    setContent('')
-    location.reload()
+    setTitle("");
+    setContent("");
+    location.reload();
   }
 
   return (
@@ -40,5 +40,5 @@ export default function PostInputs() {
         Post
       </button>
     </form>
-  )
-}
+  );
+}

…nextjs/src/app/components/PostInputs.tsx …erk-nextjs/app/components/PostInputs.tsxorm/clerk-nextjs/src/app/components/PostInputs.tsx renamed to orm/clerk-nextjs/app/components/PostInputs.tsx orm/clerk-nextjs/src/app/components/PostInputs.tsx renamed to orm/clerk-nextjs/app/components/PostInputs.tsx

@@ -1,47 +1,46 @@
-import type { Metadata } from 'next'
-import { Geist, Geist_Mono } from 'next/font/google'
-import './globals.css'
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
 import {
   ClerkProvider,
   UserButton,
   SignInButton,
   SignUpButton,
   SignedOut,
   SignedIn,
-} from '@clerk/nextjs'
+} from "@clerk/nextjs";
 
 const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin'],
-})
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
 
 const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
-})
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode
+  children: React.ReactNode;
 }>) {
   return (
     <ClerkProvider>
       <html lang="en">
         <body
-          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-        >
+          className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
           <Navbar />
           {children}
         </body>
       </html>
     </ClerkProvider>
-  )
+  );
 }
 
 const Navbar = () => {
@@ -55,5 +54,5 @@ const Navbar = () => {
         <UserButton />
       </SignedIn>
     </header>
-  )
-}
+  );
+};

orm/clerk-nextjs/src/app/favicon.ico orm/clerk-nextjs/app/favicon.icoorm/clerk-nextjs/src/app/favicon.ico renamed to orm/clerk-nextjs/app/favicon.ico

@@ -1,15 +1,15 @@
-import { currentUser } from '@clerk/nextjs/server'
-import prisma from '@/lib/prisma'
-import PostInputs from './components/PostInputs'
+import { currentUser } from "@clerk/nextjs/server";
+import prisma from "@/lib/prisma";
+import PostInputs from "@/app/components/PostInputs";
 
 export default async function Home() {
-  const user = await currentUser()
-  if (!user) return <div className="flex justify-center">Sign in to post</div>
+  const user = await currentUser();
+  if (!user) return <div className="flex justify-center">Sign in to post</div>;
 
   const posts = await prisma.post.findMany({
     where: { author: { clerkId: user.id } },
-    orderBy: { createdAt: 'desc' },
-  })
+    orderBy: { createdAt: "desc" },
+  });
 
   return (
     <main className="max-w-2xl mx-auto p-4">
@@ -18,13 +18,12 @@ export default async function Home() {
         {posts.map((post) => (
           <div
             key={post.id}
-            className="p-4 border border-zinc-800 rounded mt-4"
-          >
+            className="p-4 border border-zinc-800 rounded mt-4">
             <h2 className="font-bold">{post.title}</h2>
             <p className="mt-2">{post.content}</p>
           </div>
         ))}
       </div>
     </main>
-  )
-}
+  );
+}