clover's git

the-knife

1	---
2	title: Next.js
3	description: Deploy Next.js to Prisma Compute with Prisma.Website.Nextjs — a normal Next server on Bun, not OpenNext, and next dev locally.
4	sidebar:
5	order: 9
6	---
7
8	import { Code, Tabs, TabItem } from "@astrojs/starlight/components";
9
10	export const devDeps = "@alchemy.run/frontend-frameworks @vercel/nft";
11
12	`Prisma.Website.Nextjs` runs a real [Next.js](https://nextjs.org)
13	`next build`, then hosts a normal Next server on **Bun in Prisma Compute**.
14	The shared Node target uses `next({ dev: false })`, `prepare()`, and
15	`getRequestHandler()`. The build output, public assets, and runtime
16	dependencies are packaged for a `tar.gz` upload; there is no Docker
17	image or registry.
18
19	This is **not OpenNext**. App Router and Pages Router use Next's own
20	server, including server components, API routes, server actions, and
21	SSR. ISR and image optimization follow the normal Next server path,
22	not an external cache or image service provisioned by Alchemy.
23
24	## Install
25
26	Install the build-time integration; the resource loads `/nextjs/node`
27	from your project. Keep `next`, `react`, and `react-dom` as app dependencies.
28
29	<Tabs syncKey="pkgManager">
30	<TabItem label="bun" icon="bun"><Code code={`bun add -d ${devDeps}`} lang="sh" /></TabItem>
31	<TabItem label="npm" icon="npm"><Code code={`npm install -D ${devDeps}`} lang="sh" /></TabItem>
32	<TabItem label="pnpm" icon="pnpm"><Code code={`pnpm add -D ${devDeps}`} lang="sh" /></TabItem>
33	<TabItem label="yarn" icon="seti:yarn"><Code code={`yarn add -D ${devDeps}`} lang="sh" /></TabItem>
34	</Tabs>
35
36	## Configure Next.js
37
38	`next.config.*` loads natively. There is no adapter to install and no
39	`open-next.config.ts`. Pass `rootDir` if your Next app is not at the
40	Stack root.
41
42	## Declare the Website
43
44	```typescript
45	// alchemy.run.ts
46	import * as Prisma from "alchemy/Prisma";
47
48	export const Website = Prisma.Website.Nextjs("Website");
49	```
50
51	A live deployment creates a database-less Prisma project if you omit
52	`project`. Pass an existing project to share it with other apps.
53
54	## Add it to the Stack
55
56	```typescript
57	// alchemy.run.ts
58	import * as Alchemy from "alchemy";
59	import * as Effect from "effect/Effect";
60
61	export default Alchemy.Stack(
62	"MyNextjsSite",
63	{ providers: Prisma.providers(), state: Alchemy.localState() },
64	Effect.gen(function* () {
65	const site = yield* Website;
66	return { url: site.url };
67	}),
68	);
69	```
70
71	`site.url` is the Compute endpoint on deploy and Next's local URL in dev.
72
73	## Add environment variables
74
75	```diff lang="typescript"
76	export const Website = Prisma.Website.Nextjs("Website", {
77	+ env: {
78	+ GREETING: "Hello from Alchemy!",
79	+ API_BASE: "https://api.example.com",
80	+ },
81	});
82	```
83
84	Values are applied before `next build` and `next dev`, and passed to
85	Compute. `NEXT_PUBLIC_*` values are inlined into the browser bundle;
86	other keys remain server-side. `env` accepts strings or `Redacted` secrets.
87
88	## Read the environment in server code
89
90	```typescript
91	// app/api/hello/route.ts
92	export function GET() {
93	return Response.json({ greeting: process.env.GREETING ?? "hello" });
94	}
95	```
96
97	Route handlers, server components, and server actions read the Bun
98	process environment with `process.env`.
99
100	## Local dev
101
102	```sh
103	bun alchemy dev
104	```
105
106	Alchemy runs `next dev` with native HMR rather than deploying. The
107	Website creates no Prisma resources. Use `.pipe(Alchemy.remote())`
108	to deploy live during dev instead.
109
110	## Custom domain
111
112	```typescript
113	const site = yield* Prisma.Website.Nextjs("Web", {
114	domain: "app.example.com",
115	});
116	```
117
118	This creates `Prisma.CustomDomain` and changes `site.url` to the HTTPS
119	hostname. The app must be on the project's current default branch.
120	Configure returned DNS records yourself and verify domain status before
121	cutover; see [Custom domains](/prisma/frontend/websites#custom-domains).
122
123	## Where next
124
125	- [Next.js API](/providers/prisma/website/nextjs).
126	- [Next.js example](https://github.com/alchemy-run/alchemy/tree/main/examples/prisma-website-nextjs).
127	- [Websites](/prisma/frontend/websites) and [Compute apps](/prisma/compute/apps).
128	- [Connections](/prisma/data/connections) — database environment wiring.