This project showcases how to use the Prisma ORM with Prisma Postgres in an ESM Next.js application.

To successfully run the project, you will need a Prisma Postgres connection string from your Prisma Data Platform project.

• Next.js 15

  • Runtime: Node.js 20.19.0
  • Bundler: Webpack 5

• ESM

  • package.json contains { "type": "module" }
  • next.config.js -> next.config.mjs
  • postcss.config.js -> postcss.config.mjs

• Prisma Client with the prisma-client generator See the Prisma schema file for details.

  generator client {
    provider   = "prisma-client"
    output     = "../lib/generated/prisma"
  }

Clone the repository, navigate into it and install dependencies:

git clone git@github.com:prisma/prisma-examples.git --depth=1
cd prisma-examples/generator-prisma-client/nextjs-starter-webpack
pnpm install

Create a .env in the root of the project directory:

touch .env

Now, open the .env file and set the DATABASE_URL environment variable with your connection string:

# .env

DATABASE_URL="__YOUR_PRISMA_POSTGRES_CONNECTION_STRING__"

NEXT_PUBLIC_URL="http://localhost:3000"

Replace __YOUR_PRISMA_POSTGRES_CONNECTION_STRING__ with your actual Prisma Postgres connection string.

Run:

pnpm prisma generate

The Prisma schema file contains a single Quotes model and a QuoteKind enum. You can map this model to the database and create the corresponding Quotes table using the following command:

pnpm prisma migrate dev --name init

You now have an empty Quotes table in your database. Next, run the seed script to create some sample records in the table:

pnpm prisma db seed

You can run the app with the following command:

pnpm dev

• Prisma Postgres documentation
• Check out the Prisma docs
• Join our community on Discord to share feedback and interact with other users.
• Subscribe to our YouTube channel for live demos and video tutorials.
• Follow us on X for the latest updates.
• Report issues or ask questions on GitHub.