Skip to content

Commit ee471d3

Browse files
update and improve the Cloudflare adapter getting started guide
1 parent ea3d65d commit ee471d3

File tree

1 file changed

+42
-60
lines changed

1 file changed

+42
-60
lines changed

pages/cloudflare/get-started.mdx

Lines changed: 42 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -23,43 +23,51 @@ Use the template from `flarelabs-net/workers-next` as indicated above to use 0.3
2323
First, install [@opennextjs/cloudflare](https://www.npmjs.com/package/@opennextjs/cloudflare):
2424

2525
```sh
26-
npm install --save-dev @opennextjs/cloudflare
26+
npm install --save-dev @opennextjs/cloudflare@latest
2727
```
2828

29-
##### 2. Install Wrangler, and add a `wrangler.toml` file
29+
##### 2. Install Wrangler
3030

3131
Install the [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/) as a devDependency:
3232

3333
```npm
34-
npm install -D wrangler@latest
34+
npm install --save-dev wrangler@latest
3535
```
3636

3737
<Callout>
38-
You must use Wrangler version `3.99.0` or later to deploy Next.js apps using `@opennextjs/cloudflare`.
38+
You must use Wrangler version `3.78.10` or later to deploy Next.js apps using `@opennextjs/cloudflare`.
3939
</Callout>
4040

41-
Then, add a [`wrangler.toml`](https://developers.cloudflare.com/workers/wrangler/configuration/) file to the root directory of your Next.js app:
41+
##### 3. Create a `wrangler.toml` file
4242

43+
<Callout type='info'>
44+
This step is optional since `@opennextjs/cloudflare` creates this file for you during the build process (if not already present).
45+
</Callout>
46+
47+
A [`wrangler.toml`](https://developers.cloudflare.com/workers/wrangler/configuration/) file is needed for your
48+
application to be previewed and deployed, it is also where you configure your Worker and define what resources it can access via [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings).
49+
50+
You can create one yourself with the following content:
4351
```toml
44-
main = ".open-next/worker.js"
52+
main = ".worker-next/index.mjs"
4553
name = "my-app"
46-
4754
compatibility_date = "2024-09-23"
4855
compatibility_flags = ["nodejs_compat"]
49-
50-
# The binding name must be "ASSETS" when the cache is enabled
51-
assets = { directory = ".open-next/assets", binding = "ASSETS" }
56+
assets = { directory = ".worker-next/assets", binding = "ASSETS" }
5257
```
5358

5459
<Callout>
5560
As shown above, you must enable the [`nodejs_compat` compatibility flag](https://developers.cloudflare.com/workers/runtime-apis/nodejs/) *and* set your [compatibility date](https://developers.cloudflare.com/workers/configuration/compatibility-dates/) to `2024-09-23` or later, in order for your Next.js app to work with @opennextjs/cloudflare.
61+
The `main` and `assets` values should also not be changed unless you modify the build output result in some manner.
5662
</Callout>
5763

58-
`wrangler.toml` is where you configure your Worker and define what resources it can access via [bindings](https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings).
64+
##### 4. Add a `open-next.config.ts` file
5965

60-
##### 3. Add a `open-next.config.ts` file
66+
<Callout type='info'>
67+
This step is optional since `@opennextjs/cloudflare` creates this file for you during the build process (if not already present).
68+
</Callout>
6169

62-
Then, add a [`open-next.config.ts`](https://opennext.js.org/aws/config) file to the root directory of your Next.js app:
70+
Add a [`open-next.config.ts`](https://opennext.js.org/aws/config) file to the root directory of your Next.js app:
6371

6472
```ts
6573
import type { OpenNextConfig } from "@opennextjs/aws/types/open-next";
@@ -70,7 +78,7 @@ const config: OpenNextConfig = {
7078
override: {
7179
wrapper: "cloudflare-node",
7280
converter: "edge",
73-
// Set `incrementalCache` to "dummy" to disable KV cache
81+
// set `incrementalCache` to "dummy" to disable KV cache
7482
incrementalCache: async () => cache,
7583
tagCache: "dummy",
7684
queue: "dummy",
@@ -90,9 +98,11 @@ const config: OpenNextConfig = {
9098
export default config;
9199
```
92100

93-
You can either install the `@opennextjs/aws` NPM package to get the types or `open-next.config.ts` to the [`exclude`](https://www.typescriptlang.org/tsconfig/#exclude) configuration key of your `tsconfig.json`.
101+
<Callout>
102+
To use the `OpenNextConfig` type as illustrated above (which is not necessary), you need to install the `@opennextjs/aws` NPM package as a dev dependency.
103+
</Callout>
94104

95-
##### 4. Add a `.dev.vars` file
105+
##### 5. Add a `.dev.vars` file
96106

97107
Then, add a [`.dev.vars`](https://developers.cloudflare.com/workers/testing/local-development/#local-only-environment-variables) file to the root directory of your Next.js app:
98108

@@ -102,7 +112,7 @@ NEXTJS_ENV=development
102112

103113
The `NEXTJS_ENV` variable defines the environment to use when loading Next.js `.env` files. It defaults to "production" when not defined.
104114

105-
##### 5. Update `package.json`
115+
##### 6. Update the `package.json` file
106116

107117
Add the following to the scripts field of your `package.json` file:
108118

@@ -118,70 +128,42 @@ Add the following to the scripts field of your `package.json` file:
118128
- `npm run preview:worker`: Runs `build:worker` and then `dev:worker`, allowing you to quickly preview your app running locally in the Workers runtime, via a single command.
119129
- `npm run deploy`: Builds your app, and then deploys it to Cloudflare
120130

121-
### 6. Add caching with Workers KV
131+
##### 7. Add caching with Workers KV
122132

123133
See the [Caching docs](/cloudflare/caching) for information on enabling Next.js caching in your OpenNext project.
124134

125-
### 7. Remove `@cloudflare/next-on-pages` (if necessary)
135+
##### 8. Remove any `export const runtime = "edge";` if present
126136

127-
If your Next.js app currently uses `@cloudflare/next-on-pages`, you'll want to remove it, and make a few changes.
137+
Before deploying your app, remove the `export const runtime = "edge";` line from any of your source files.
128138

129-
#### Remove `export const runtime = "edge";`
130-
131-
Before deploying your app, remove the `export const runtime = "edge";` line from your `next.config.js` file.
132139
The edge runtime is not supported yet with `@opennextjs/cloudflare`.
133140

134-
#### Add `.open-next` to `.gitignore`
141+
##### 9. Add `.open-next` to `.gitignore`
135142

136143
You should add `.open-next` to your `.gitignore` file to prevent the build output from being committed to your repository.
137144

138-
#### Uninstall `@cloudflare/next-on-pages`
139-
140-
You should uninstall `@cloudflare/next-on-pages` and remove any references to it.
145+
##### 10. Remove `@cloudflare/next-on-pages` (if necessary)
141146

142-
In `package.json`:
143-
144-
```diff
145-
"scripts": {
146-
- "pages:build": "npx @cloudflare/next-on-pages",
147-
- "preview": "npm run pages:build && wrangler pages dev",
148-
- "deploy": "npm run pages:build && wrangler pages deploy"
149-
150-
"devDependencies": {
151-
- "@cloudflare/next-on-pages": "*",
152-
```
153-
154-
(remember to also remove [eslint-plugin-next-on-pages](https://www.npmjs.com/package/eslint-plugin-next-on-pages) from your `.eslintrc.js` file)
155-
156-
You no longer need to call `setupDevPlatform()` in your `next.config.mjs` file:
157-
158-
```diff title="next.config.mjs"
159-
- import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
160-
161-
/** @type {import('next').NextConfig} */
162-
const nextConfig = {};
163-
164-
- if (process.env.NODE_ENV === 'development') {
165-
- await setupDevPlatform();
166-
- }
167-
```
147+
If your Next.js app currently uses `@cloudflare/next-on-pages`, you'll want to remove it, and make a few changes.
168148

169-
And you'll want to replace any uses of `getRequestContext` from `@cloudflare/next-on-pages` with `getCloudflareContext` from `@opennextjs/cloudflare`:
149+
Uninstalling the [`@cloudflare/next-on-pages`](https://www.npmjs.com/package/@cloudflare/next-on-pages) package as well as the [`eslint-plugin-next-on-pages`](https://www.npmjs.com/package/eslint-plugin-next-on-pages) package if present.
170150

171-
```diff
172-
- import { getRequestContext } from "@cloudflare/next-on-pages";
173-
+ import { getCloudflareContext } from "@opennextjs/cloudflare";
174-
```
151+
Remove any reference of these packages from your source and configuration files.
152+
This includes:
153+
- `setupDevPlatform()` calls in your Next.js config file
154+
- `getRequestContext` imports from `@cloudflare/next-on-pages` from your source files
155+
(those can be replaced with `getCloudflareContext` calls from `@opennextjs/cloudflare`)
156+
- next-on-pages eslint rules set in your Eslint config file
175157

176-
##### 8. Develop locally
158+
##### 11. Develop locally
177159

178160
You can continue to run `next dev` when developing locally.
179161

180162
During local development, you can access local versions of Cloudflare bindings as indicated in the [bindings documentation](./bindings).
181163

182164
In step 3, we also added the `npm run preview:worker`, which allows you to quickly preview your app running locally in the Workers runtime, rather than in Node.js. This allows you to test changes in the same runtime as your app will run in when deployed to Cloudflare.
183165

184-
##### 9. Deploy to Cloudflare Workers
166+
##### 12. Deploy to Cloudflare Workers
185167

186168
Either deploy via the command line:
187169

0 commit comments

Comments
 (0)