DC-4755 Fix Example Projects

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!
 

orm/clerk-nextjs/app/api/webhooks/clerk/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/src/app/components/PostInputs.tsx → orm/clerk-nextjs/app/components/PostInputs.tsx

@@ -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>
-  )
-}
+  );
+}

orm/clerk-nextjs/src/app/layout.tsx → orm/clerk-nextjs/app/layout.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/page.tsx → orm/clerk-nextjs/app/page.tsx

@@ -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>
-  )
-}
+  );
+}

orm/clerk-nextjs/lib/prisma.ts

@@ -0,0 +1,13 @@
+import { PrismaClient } from '../app/generated/prisma/client'
+import { withAccelerate } from '@prisma/extension-accelerate'
+
+const globalForPrisma = global as unknown as {
+  prisma: PrismaClient
+}
+
+const prisma =
+  globalForPrisma.prisma || new PrismaClient().$extends(withAccelerate())
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma
+
+export default prisma

orm/clerk-nextjs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "clerk-nextjs",
+  "name": "clerk2",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,25 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@clerk/nextjs": "6.28.1",
-    "@prisma/client": "6.9.0",
-    "@prisma/extension-accelerate": "2.0.2",
-    "next": "15.3.5",
+    "@clerk/nextjs": "^6.30.1",
+    "@prisma/extension-accelerate": "^2.0.2",
+    "next": "15.4.6",
     "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "svix": "1.68.0"
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "3.3.1",
-    "@tailwindcss/postcss": "4.1.11",
-    "@types/node": "22.15.32",
-    "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6",
-    "eslint": "9.30.1",
-    "eslint-config-next": "15.3.5",
-    "prisma": "6.9.0",
-    "tailwindcss": "4.1.11",
-    "tsx": "4.20.3",
-    "typescript": "5.8.3"
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "prisma": "^6.14.0",
+    "tailwindcss": "^4",
+    "tsx": "^4.20.4",
+    "typescript": "^5"
   }
 }

orm/clerk-nextjs/prisma/schema.prisma

@@ -1,12 +1,6 @@
-// This is your Prisma schema file,
-// learn more about it in the docs: https://pris.ly/d/prisma-schema
-
-// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
-// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
-
 generator client {
-  provider = "prisma-client-js"
-  output   = "../src/app/generated/prisma"
+  provider = "prisma-client"
+  output   = "../app/generated/prisma"
 }
 
 datasource db {
@@ -15,19 +9,19 @@ datasource db {
 }
 
 model User {
-  id      String  @id @default(cuid())
+  id      Int     @id @default(autoincrement())
   clerkId String  @unique
   email   String  @unique
   name    String?
   posts   Post[]
 }
 
 model Post {
-  id        String   @id @default(cuid())
+  id        Int      @id @default(autoincrement())
   title     String
   content   String?
   published Boolean  @default(false)
-  authorId  String
+  authorId  Int
   author    User     @relation(fields: [authorId], references: [id])
   createdAt DateTime @default(now())
 }

orm/clerk-nextjs/tsconfig.json

@@ -19,7 +19,7 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],