feat(prisma-client): new nextjs-starter-webpack-monorepo example (#8186)

* feat(prisma-client): new nextjs-starter-webpack-monorepo example

* feat: rename prisma-postgres -> generator-prisma-client, rename .generated -> generated, adjust README, adjust imports

---------

Co-authored-by: jkomyno <[email protected]>

Author: jkomyno

generator-prisma-client/nextjs-starter-webpack-monorepo/README.md

@@ -0,0 +1,160 @@
+# Prisma Postgres Example: Next.js 15 Starter (Monorepo, Webpack, Node.js, ESM)
+
+This project showcases how to use the Prisma ORM with Prisma Postgres in an ESM monorepo, containing a Next.js application and Prisma package definition.
+
+It also demonstrates that [@prisma/nextjs-monorepo-workaround-plugin](https://www.npmjs.com/package/@prisma/nextjs-monorepo-workaround-plugin) is no longer needed, as the `prisma-client` generator supports ESM and monorepos out of the box.
+
+## Project Structure
+
+```
+.
+├── packages
+│   ├── next-app                     # Next.js application
+│   │   ├── app
+│   │   ├── components
+│   │   ├── lib
+│   │   ├── next.config.mjs
+│   │   ├── package.json
+│   │   ├── postcss.config.mjs
+│   │   └── tsconfig.json
+│   └── prisma                       # Prisma Client definition and re-export
+│       ├── package.json
+│       ├── prisma
+│       │   └── schema.prisma        # Prisma schema file 
+│       ├── src
+│       │   ├── enums.ts
+│       │   └── index.ts
+│       └── tsconfig.json
+├── pnpm-workspace.yaml               # Pnpm workspace configuration file
+└── tsconfig.json
+```
+
+## Prerequisites
+
+To successfully run the project, you will need the following:
+
+- Two **Prisma Postgres** connection strings:
+  - Your **Prisma Postgres + Accelerate connection string** (containing your **Prisma API key**) which you can get by enabling Postgres in a project in your [Prisma Data Platform](https://pris.ly/pdp) account. You will use this connection string to run Prisma migrations.
+  - Your **Prisma Postgres direct TCP connection string** which you will use with Prisma Client.
+    Learn more in the [docs](https://www.prisma.io/docs/postgres/database/direct-connections).
+- [`pnpm`](https://pnpm.io/) installed globally to manage the monorepo workspace.
+
+## Tech Stack
+
+- 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](./packages/prisma/prisma/schema.prisma) for details.
+  
+  ```prisma
+  generator client {
+    provider = "prisma-client"
+    output = "../lib/generated/prisma"
+    previewFeatures = ["driverAdapters", "queryCompiler"]
+    runtime = "nodejs"
+  }
+  ```
+
+## Getting started
+
+### 1. Clone the repository
+
+Clone the repository, navigate into it and install dependencies:
+
+```
+git clone [email protected]:prisma/prisma-examples.git --depth=1
+cd prisma-examples/generator-prisma-client/nextjs-starter-webpack-monorepo
+pnpm install
+```
+
+### 2. Configure environment variables
+
+Create a `.envrc` in the root of the project directory:
+
+```bash
+touch .envrc
+```
+
+Now, open the `.envrc` file and set the `DATABASE_URL` environment variables with the values of your connection string and your Prisma Postgres connection string:
+
+```bash
+# .envrc
+
+# Prisma Postgres connection string (used for migrations)
+export DATABASE_URL="__YOUR_PRISMA_POSTGRES_CONNECTION_STRING__"
+
+# Postgres connection string (used for queries by Prisma Client)
+export DATABASE_URL="__YOUR_PRISMA_POSTGRES_DIRECT_CONNECTION_STRING__"
+
+NEXT_PUBLIC_URL="http://localhost:3000"
+```
+
+Note that `__YOUR_PRISMA_POSTGRES_CONNECTION_STRING__` is a placeholder value that you need to replace with the values of your Prisma Postgres + Accelerate connection string. Notice that the Accelerate connection string has the following structure: `prisma+postgres://accelerate.prisma-data.net/?api_key=<api_key_value>`.
+
+Note that `__YOUR_PRISMA_POSTGRES_DIRECT_CONNECTION_STRING__` is a placeholder value that you need to replace with the values of your Prisma Postgres direct TCP connection string. The direct connection string has the following structure: `postgres://<username>:<password>@<host>:<port>/<database>`.
+
+Expose the environment variables to your project by running the following command:
+
+```bash
+source .envrc
+```
+
+### 3. Run a migration to create the database structure and seed the database
+
+The [Prisma schema file](./packages/prisma/prisma/schema.prisma) 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:
+
+```sh
+pnpm --filter @nextjs-starter-webpack-monorepo/prisma exec prisma migrate dev --name init
+```
+
+You now have an empty `Quotes` table in your database. Next, run the [seed script](./packages/prisma/prisma/seed.ts) to create some sample records in the table:
+
+```sh
+pnpm --filter @nextjs-starter-webpack-monorepo/prisma exec prisma db seed
+```
+
+### 4. Generate Prisma Client
+
+Run:
+
+```
+pnpm --filter @nextjs-starter-webpack-monorepo/prisma exec prisma generate
+```
+
+### 5. Build the Prisma package
+
+Run:
+
+```sh
+pnpm --filter @nextjs-starter-webpack-monorepo/prisma build
+```
+
+### 6. Install the workspace dependencies in the Next.js app
+
+Run:
+
+```sh
+pnpm --filter @nextjs-starter-webpack-monorepo/next-app install
+```
+
+### 7. Start the Next.js app
+
+You can run the app with the following command:
+
+```
+pnpm --filter @nextjs-starter-webpack-monorepo/next-app dev
+```
+
+## Resources
+
+- [Prisma Postgres documentation](https://www.prisma.io/docs/postgres)
+- Check out the [Prisma docs](https://www.prisma.io/docs)
+- [Join our community on Discord](https://pris.ly/discord?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section) to share feedback and interact with other users.
+- [Subscribe to our YouTube channel](https://pris.ly/youtube?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section) for live demos and video tutorials.
+- [Follow us on X](https://pris.ly/x?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section) for the latest updates.
+- Report issues or ask [questions on GitHub](https://pris.ly/github?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section).

generator-prisma-client/nextjs-starter-webpack-monorepo/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "generator-prisma-client-nextjs-starter-webpack-monorepo",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "author": "Alberto Schiabel <[email protected]> (https://github.com/jkomyno)",
+  "license": "MIT",
+  "packageManager": "[email protected]+sha512.499434c9d8fdd1a2794ebf4552b3b25c0a633abcee5bb15e7b5de90f32f47b513aca98cd5cfd001c31f0db454bc3804edccd578501e4ca293a6816166bbd9f81",
+  "scripts": {
+    "build": "pnpm -r build",
+    "clean": "pnpm -r clean"
+  }
+}

generator-prisma-client/nextjs-starter-webpack-monorepo/packages/next-app/.env.example

@@ -0,0 +1,2 @@
+DATABASE_URL="prisma+postgres://..."
+DIRECT_URL="postgres://..."

generator-prisma-client/nextjs-starter-webpack-monorepo/packages/next-app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

generator-prisma-client/nextjs-starter-webpack-monorepo/packages/next-app/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+.env
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+package-lock.json
+
+# generated Prisma client
+lib/.generated

generator-prisma-client/nextjs-starter-webpack-monorepo/packages/next-app/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2025 Prisma
+
+Permission is hereby granted, free of
+charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

generator-prisma-client/nextjs-starter-webpack-monorepo/packages/next-app/app/api/route.ts

@@ -0,0 +1,14 @@
+import { getQuotes } from '@/lib/utils/query'
+
+// disabling caching
+export const fetchCache = 'force-no-store'
+export const revalidate = 0
+
+export async function GET(_request: Request) {
+  const data = await getQuotes()
+
+  return new Response(JSON.stringify(data), {
+    headers: { 'Content-Type': 'application/json' },
+    status: 200,
+  })
+}

generator-prisma-client/nextjs-starter-webpack-monorepo/packages/next-app/app/favicon.ico

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}

generator-prisma-client/nextjs-starter-webpack-monorepo/packages/next-app/app/globals.css

@@ -0,0 +1,22 @@
+import './globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Accelerated Quotes',
+  description: 'Accelerate starter',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}