You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
##### 2. Install Wrangler, and add a `wrangler.toml` file
29
+
##### 2. Install Wrangler
30
30
31
31
Install the [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/) as a devDependency:
32
32
33
33
```npm
34
-
npm install -D wrangler@latest
34
+
npm install --save-dev wrangler@latest
35
35
```
36
36
37
37
<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`.
39
39
</Callout>
40
40
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
42
42
43
+
<Callouttype='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:
43
51
```toml
44
-
main = ".open-next/worker.js"
52
+
main = ".worker-next/index.mjs"
45
53
name = "my-app"
46
-
47
54
compatibility_date = "2024-09-23"
48
55
compatibility_flags = ["nodejs_compat"]
49
-
50
-
# The binding name must be "ASSETS" when the cache is enabled
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.
56
62
</Callout>
57
63
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
59
65
60
-
##### 3. Add a `open-next.config.ts` file
66
+
<Callouttype='info'>
67
+
This step is optional since `@opennextjs/cloudflare` creates this file for you during the build process (if not already present).
68
+
</Callout>
61
69
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:
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>
94
104
95
-
##### 4. Add a `.dev.vars` file
105
+
##### 5. Add a `.dev.vars` file
96
106
97
107
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:
98
108
@@ -102,7 +112,7 @@ NEXTJS_ENV=development
102
112
103
113
The `NEXTJS_ENV` variable defines the environment to use when loading Next.js `.env` files. It defaults to "production" when not defined.
104
114
105
-
##### 5. Update `package.json`
115
+
##### 6. Update the `package.json` file
106
116
107
117
Add the following to the scripts field of your `package.json` file:
108
118
@@ -118,70 +128,42 @@ Add the following to the scripts field of your `package.json` file:
118
128
-`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.
119
129
-`npm run deploy`: Builds your app, and then deploys it to Cloudflare
120
130
121
-
###6. Add caching with Workers KV
131
+
##### 7. Add caching with Workers KV
122
132
123
133
See the [Caching docs](/cloudflare/caching) for information on enabling Next.js caching in your OpenNext project.
- "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.
168
148
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.
170
150
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
175
157
176
-
##### 8. Develop locally
158
+
##### 11. Develop locally
177
159
178
160
You can continue to run `next dev` when developing locally.
179
161
180
162
During local development, you can access local versions of Cloudflare bindings as indicated in the [bindings documentation](./bindings).
181
163
182
164
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.
0 commit comments