Prisma 7 + NeonDB Setup in Next.js (JavaScript Only)

Modern web apps need fast, scalable, and serverless-friendly databases.

In this tutorial, we’ll set up Prisma 7 with NeonDB (PostgreSQL) in a Next.js App Router project using JavaScript (not TypeScript).

This setup is ideal for:

• Serverless apps
• Vercel deployments
• Modern API-driven architectures

---

🧠 What You’ll Learn

• What NeonDB is and why it works perfectly with serverless apps
• How Prisma 7 integrates with Next.js App Router
• Setting up Prisma using JavaScript
• Connecting Prisma to Neon PostgreSQL
• Running migrations and testing API routes

---

🧩 Tech Stack

• Next.js (App Router)
• Prisma 7
• NeonDB (PostgreSQL)
• JavaScript
• Node.js

---

1️⃣ Create a Next.js App (JavaScript)

```

bash
npx create-next-app@latest prisma-neon-demo

Choose:

• JavaScript ✅
• App Router ✅
• TypeScript ❌

Start the app:

bash
cd prisma-neon-demo
npm run dev

---

2️⃣ Create a NeonDB PostgreSQL Database

1. Go to the Neon Console
2. Create a new project
3. Copy the PostgreSQL connection string

Example:

env
postgresql://user:[e-mail]/neondb?sslmode=require

💡 Neon is serverless, auto-scaling, and handles pooling for you.

---

3️⃣ Install Prisma 7

bash
npm install prisma @prisma/client
npx prisma init

This creates:

prisma/
 └─ schema.prisma
.env

---

4️⃣ Configure Environment Variables

Update .env:

env
DATABASE_URL="postgresql://user:[e-mail]/neondb?sslmode=require"

---

5️⃣ Define Prisma Schema

Edit prisma/schema.prisma:

prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  name      String
  email     String   @unique
  createdAt DateTime @default(now())
}

---

6️⃣ Run Prisma Migration

bash
npx prisma migrate dev --name init

✔ Creates tables in NeonDB
✔ Generates Prisma Client

---

7️⃣ Setup Prisma Client for Next.js (JavaScript)

Create lib/prisma.js:

js
import { PrismaClient } from "@prisma/client";

const globalForPrisma = global;

export const prisma =
  globalForPrisma.prisma ||
  new PrismaClient({
    log: ["query"],
  });

if (process.env.NODE_ENV !== "production") {
  globalForPrisma.prisma = prisma;
}

✅ Prevents multiple Prisma instances during hot reloads.

---

8️⃣ Create API Route Using Prisma

Create app/api/users/route.js:

js
import { prisma } from "@/lib/prisma";
import { NextResponse } from "next/server";

export async function GET() {
  const users = await prisma.user.findMany();
  return NextResponse.json(users);
}

export async function POST() {
  const user = await prisma.user.create({
    data: {
      name: "CodingMavrick",
      email: "[e-mail]",
    },
  });

  return NextResponse.json(user);
}

---

9️⃣ Test the API

bash
GET  http://localhost:3000/api/users
POST http://localhost:3000/api/users

🎉 Prisma + NeonDB is now fully working with Next.js!

---

🔥 Why Use Prisma with NeonDB?

• Serverless PostgreSQL
• Automatic scaling
• Built-in branching
• No connection pool issues
• Clean schema-first development

---

⚠️ Common Issues & Fixes

Prisma Client Error

bash
npx prisma generate

Migration Issues

Ensure SSL is enabled:

env
?sslmode=require

---

🎯 When Should You Use This Stack?

• SaaS products
• APIs & microservices
• Serverless backends
• Rapid MVP development

---

📌 Final Thoughts

Prisma 7 + NeonDB is one of the cleanest and most scalable database setups for modern Next.js applications, especially when running in serverless environments.

If you’re building production-grade apps with JavaScript, this combo is hard to beat.

---

🔗 Related Content

• API Gateway using Cloudflare Workers
• Observability with OpenTelemetry
• Microservices with Node.js

📺 YouTube: CodingMavrick
🧠 More tutorials coming soon

---

🏷 Tags

#nextjs #prisma #postgresql #neondb #javascript #serverless