Skip to content

Commit 875912d

Browse files
jkomynojkomyno
authored
feat(prisma-client): new nextjs-starter-turbopack example (#8185)
* feat(prisma-postgres): init nextjs-starter from accelerate/nextjs-starter example * feat(prisma-postgres): update prisma schema and version, using the "prisma-client" generator * feat(prisma-postgres): add env validation * chore(prisma-postgres): add .env.example * feat(prisma-postgres): add getDb utility wrapping Prisma Driver Adapters * feat(prisma-postgres): enable ESM * feat(prisma-postgres): got working example with [patched] prisma-client, enums on client side * feat(prisma-postgres): update README and package.json * feat(prisma-postgres): rename nextjs-starter project to nextjs-starter-webpack * feat(prisma-postgres): rename nextjs-starter project to nextjs-starter-webpack * feat(prisma-client): new nextjs-starter-webpack example, with Next.js 15, Webpack, Node.js, Prisma Postgres * feat(prisma-client): new nextjs-starter-turbopack example, with Next.js 15, Turbopack, Node.js, Prisma Postgres * feat: review comments * feat: rename .generated -> generated, adjust import paths, adjust copy * feat: rename prisma-postgres -> generator-prisma-client * feat: rename prisma-postgres -> generator-prisma-client, rename .generated -> generated, adjust README, adjust imports * chore: minor update in README * chore: update name * chore: update name * fix: replace npm with pnpm --------- Co-authored-by: jkomyno <12381818+jkomyno@users.noreply.github.com>
1 parent e80c9d4 commit 875912d

29 files changed

+4914
-0
lines changed

‎generator-prisma-client/nextjs-starter-turbopack/.env.example‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
DATABASE_URL="prisma+postgres://..."
2+
DIRECT_URL="postgres://..."

‎generator-prisma-client/nextjs-starter-turbopack/.eslintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎generator-prisma-client/nextjs-starter-turbopack/.gitignore‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
.env
9+
10+
# testing
11+
/coverage
12+
13+
# next.js
14+
/.next/
15+
/out/
16+
17+
# production
18+
/build
19+
20+
# misc
21+
.DS_Store
22+
*.pem
23+
24+
# debug
25+
npm-debug.log*
26+
yarn-debug.log*
27+
yarn-error.log*
28+
29+
# local env files
30+
.env*.local
31+
32+
# vercel
33+
.vercel
34+
35+
# typescript
36+
*.tsbuildinfo
37+
next-env.d.ts
38+
package-lock.json
39+
40+
# generated Prisma client
41+
lib/generated/

‎generator-prisma-client/nextjs-starter-turbopack/LICENSE‎

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

‎generator-prisma-client/nextjs-starter-turbopack/README.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# Prisma Postgres Example: Next.js 15 Starter (Turbopack, Node.js, ESM)
2+
3+
This project showcases how to use the Prisma ORM with Prisma Postgres in an ESM Next.js application.
4+
5+
## Prerequisites
6+
7+
To successfully run the project, you will need the following:
8+
9+
- Two **Prisma Postgres** connection strings:
10+
- 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.
11+
- Your **Prisma Postgres direct TCP connection string** which you will use with Prisma Client.
12+
Learn more in the [docs](https://www.prisma.io/docs/postgres/database/direct-connections).
13+
14+
## Tech Stack
15+
16+
- Next.js 15
17+
- Runtime: Node.js 20.19.0
18+
- Bundler: Turbopack (stable for `dev`, alpha for `build`)
19+
- ESM
20+
- `package.json` contains `{ "type": "module" }`
21+
- `next.config.js` -> `next.config.mjs`
22+
- `postcss.config.js` -> `postcss.config.mjs`
23+
- Prisma Client with the `prisma-client` generator
24+
See the [Prisma schema file](./prisma/schema.prisma) for details.
25+
26+
```prisma
27+
generator client {
28+
provider = "prisma-client"
29+
output = "../lib/generated/prisma"
30+
previewFeatures = ["driverAdapters", "queryCompiler"]
31+
runtime = "nodejs"
32+
}
33+
```
34+
35+
## Getting started
36+
37+
### 1. Clone the repository
38+
39+
Clone the repository, navigate into it and install dependencies:
40+
41+
```
42+
git clone git@github.com:prisma/prisma-examples.git --depth=1
43+
cd prisma-examples/generator-prisma-client/nextjs-starter-turbopack
44+
pnpm install
45+
```
46+
47+
### 2. Configure environment variables
48+
49+
Create a `.env` in the root of the project directory:
50+
51+
```bash
52+
touch .env
53+
```
54+
55+
Now, open the `.env` file and set the `DATABASE_URL` environment variables with the values of your connection string and your Prisma Postgres connection string:
56+
57+
```bash
58+
# .env
59+
60+
# Prisma Postgres connection string (used for migrations)
61+
DATABASE_URL="__YOUR_PRISMA_POSTGRES_CONNECTION_STRING__"
62+
63+
# Postgres connection string (used for queries by Prisma Client)
64+
DIRECT_URL="__YOUR_PRISMA_POSTGRES_DIRECT_CONNECTION_STRING__"
65+
66+
NEXT_PUBLIC_URL="http://localhost:3000"
67+
```
68+
69+
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>`.
70+
71+
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>`.
72+
73+
### 3. Run a migration to create the database structure and seed the database
74+
75+
The [Prisma schema file](./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:
76+
77+
```
78+
pnpm prisma migrate dev --name init
79+
```
80+
81+
You now have an empty `Quotes` table in your database. Next, run the [seed script](./prisma/seed.ts) to create some sample records in the table:
82+
83+
```
84+
pnpm prisma db seed
85+
```
86+
87+
### 4. Generate Prisma Client
88+
89+
Run:
90+
91+
```
92+
pnpm prisma generate
93+
```
94+
95+
### 5. Start the app
96+
97+
You can run the app with the following command:
98+
99+
```
100+
pnpm dev
101+
```
102+
103+
## Resources
104+
105+
- [Prisma Postgres documentation](https://www.prisma.io/docs/postgres)
106+
- Check out the [Prisma docs](https://www.prisma.io/docs)
107+
- [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.
108+
- [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.
109+
- [Follow us on X](https://pris.ly/x?utm_source=github&utm_medium=prisma_examples&utm_content=next_steps_section) for the latest updates.
110+
- 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-turbopack/app/api/route.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { getQuotes } from '@/lib/utils/query'
2+
3+
/**
4+
* `runtime = "edge"` would cause issues such as:
5+
* 2 |
6+
* 3 | var path = require('path')
7+
* > 4 | , fs = require('fs')
8+
* | ^
9+
* 5 | , helper = require('./helper.js')
10+
* 6 | ;
11+
* 7 |
12+
*/
13+
// export const runtime = "edge";
14+
15+
// disabling caching
16+
export const fetchCache = 'force-no-store'
17+
export const revalidate = 0
18+
19+
export async function GET(_request: Request) {
20+
const data = await getQuotes()
21+
22+
return new Response(JSON.stringify(data), {
23+
headers: { 'Content-Type': 'application/json' },
24+
status: 200,
25+
})
26+
}

‎generator-prisma-client/nextjs-starter-turbopack/app/favicon.ico‎

25.3 KB
Binary file not shown.

‎generator-prisma-client/nextjs-starter-turbopack/app/globals.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
:root {
6+
--foreground-rgb: 0, 0, 0;
7+
--background-start-rgb: 214, 219, 220;
8+
--background-end-rgb: 255, 255, 255;
9+
}
10+
11+
@media (prefers-color-scheme: dark) {
12+
:root {
13+
--foreground-rgb: 255, 255, 255;
14+
--background-start-rgb: 0, 0, 0;
15+
--background-end-rgb: 0, 0, 0;
16+
}
17+
}
18+
19+
body {
20+
color: rgb(var(--foreground-rgb));
21+
background: linear-gradient(
22+
to bottom,
23+
transparent,
24+
rgb(var(--background-end-rgb))
25+
)
26+
rgb(var(--background-start-rgb));
27+
}

‎generator-prisma-client/nextjs-starter-turbopack/app/layout.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import './globals.css'
2+
import type { Metadata } from 'next'
3+
import { Inter } from 'next/font/google'
4+
5+
const inter = Inter({ subsets: ['latin'] })
6+
7+
export const metadata: Metadata = {
8+
title: 'Accelerated Quotes',
9+
description: 'Accelerate starter',
10+
}
11+
12+
export default function RootLayout({
13+
children,
14+
}: {
15+
children: React.ReactNode
16+
}) {
17+
return (
18+
<html lang="en">
19+
<body className={inter.className}>{children}</body>
20+
</html>
21+
)
22+
}

‎generator-prisma-client/nextjs-starter-turbopack/app/page.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Suspense } from 'react'
2+
import { Quotes } from '@/components/quotes'
3+
import { QuotesLoading } from '@/components/quotes-loading'
4+
import { DisplayPrismaEnums } from '@/components/display-prisma-enums'
5+
6+
export default async function Home() {
7+
return (
8+
<main className="flex min-h-screen flex-col items-center justify-start p-8 md:p-24 bg-white dark:bg-slate-900">
9+
<div className="text-center mb-12">
10+
<h1 className="text-2xl font-bold text-slate-800 dark:text-white mb-4">
11+
Using: Next.js 15, Turbopack, Node.js, <pre className="inline-block">prisma-client</pre>
12+
</h1>
13+
14+
<p className="text-xl text-slate-600 dark:text-slate-300">
15+
Quotes: A collection of inspiring opinions and fascinating facts
16+
</p>
17+
</div>
18+
<div className="text-center mb-12">
19+
<DisplayPrismaEnums />
20+
</div>
21+
22+
<Suspense fallback={<QuotesLoading />}>
23+
<Quotes />
24+
</Suspense>
25+
</main>
26+
)
27+
}

0 commit comments

Comments
 (0)