Skip to content

Commit 202d245

Browse files
committed
Update the documentation for Next on Workers
1 parent 518e8f8 commit 202d245

File tree

1 file changed

+16
-40
lines changed
  • src/content/docs/workers/frameworks/framework-guides

1 file changed

+16
-40
lines changed

src/content/docs/workers/frameworks/framework-guides/nextjs.mdx

Lines changed: 16 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import {
1515
WranglerConfig
1616
} from "~/components";
1717

18+
A more detailed documentation is available on the [Open Next website](https://opennext.js.org/cloudflare).
19+
1820
## New apps
1921

2022
To create a new Next.js app, pre-configured to run on Cloudflare using [`@opennextjs/cloudflare`](https://opennext.js.org/cloudflare), run:
@@ -36,7 +38,7 @@ To create a new Next.js app, pre-configured to run on Cloudflare using [`@openne
3638

3739
## Existing Next.js apps
3840

39-
:::note[Minimum required Wrangler version: 3.78.10.]
41+
:::note[Minimum required Wrangler version: 3.99.0.]
4042

4143
Check your version by running `wrangler --version`. To update Wrangler, refer to [Install/Update Wrangler](/workers/wrangler/install-and-update/).
4244

@@ -77,58 +79,32 @@ You configure your Worker and define what resources it can access via [bindings]
7779
Add the following to the scripts field of your `package.json` file:
7880

7981
```json
80-
"build:worker": "opennextjs-cloudflare",
81-
"dev:worker": "wrangler dev --port 8771",
82-
"preview:worker": "npm run build:worker && npm run dev:worker",
83-
"deploy:worker": "npm run build:worker && wrangler deploy"
84-
```
85-
86-
- `npm run build:worker`: Runs the [@opennextjs/cloudflare](https://www.npmjs.com/package/@opennextjs/cloudflare) adapter. This first builds your app by running `next build` behind the scenes, and then transforms the build output to a format that you can run locally using [Wrangler](/workers/wrangler/) and deploy to Cloudflare.
87-
- `npm run dev:worker`: Takes the output generated by `build:worker` and runs it locally in [workerd](https://github.com/cloudflare/workerd), the open-source Workers Runtime, allowing you to run the app locally in the same environment that it will run in production. If you instead run `next dev`, your app will run in Node.js, which is a different JavaScript runtime from the Workers runtime, with differences in behavior and APIs.
88-
- `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.
89-
- `npm run deploy:worker`: Builds your app, and then deploys it to Cloudflare
90-
91-
### 4. Add caching with Workers KV
92-
93-
`opennextjs/cloudflare` uses [Workers KV](/kv/) as the cache for your Next.js app. Workers KV is [fast](https://blog.cloudflare.com/faster-workers-kv) and uses Cloudflare's [Tiered Cache](/cache/how-to/tiered-cache/) to increase cache hit rates. When you write cached data to Workers KV, you write to storage that can be read by any Cloudflare location. This means your app can fetch data, cache it in KV, and then be read by subsequent requests from this cache anywhere in the world.
94-
95-
To enable caching, you must:
96-
97-
#### Create a KV namespace
98-
99-
```sh
100-
npx wrangler@latest kv namespace create NEXT_CACHE_WORKERS_KV
82+
"preview": "opennextjs-cloudflare && wrangler dev",
83+
"deploy": "opennextjs-cloudflare && wrangler deploy",
84+
"cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
10185
```
10286

103-
#### Add the KV namespace to your Worker
104-
105-
<WranglerConfig>
106-
107-
```toml
108-
[[kv_namespaces]]
109-
binding = "NEXT_CACHE_WORKERS_KV"
110-
id = "<YOUR_NAMESPACE_ID>"
111-
```
87+
- `preview`: Builds your app and serves it locally, allowing you to quickly preview your app running locally in the Workers runtime, via a single command.
88+
- `deploy`: Builds your app, and then deploys it to Cloudflare
89+
- `cf-typegen`: Generates a `cloudflare-env.d.ts` file at the root of your project containing the types for the env.
11290

113-
</WranglerConfig>
91+
### 4. Optionally add caching
11492

115-
#### Set the name of the binding to `NEXT_CACHE_WORKERS_KV`
93+
Caching is actively being worked on. It is fully functional for development and we are working on an optimized implementation suitable for production.
11694

117-
As shown above, the name of the binding that you configure for the KV namespace must be set to `NEXT_CACHE_WORKERS_KV`.
95+
Check [the documentation](https://opennext.js.org/cloudflare/caching) on the Open Next website.
11896

11997
### 5. Develop locally
12098

12199
You can continue to run `next dev` when developing locally.
122100

123101
### 6. Preview locally your application and create an OpenNext config file
124102

125-
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.
126-
This allows you to test changes in the same runtime that your app runs in, when deployed to Cloudflare.
127-
128-
To preview your application in such way run:
103+
In step 3, we also added the `npm run preview`, which allows you to quickly preview your app running locally in the Workers runtime, rather than in Node.js.
104+
This allows you to test changes in the same runtime that your app runs in, when deployed to Cloudflare:
129105

130106
```sh
131-
npm run preview:worker
107+
npm run preview
132108
```
133109

134110
This command will build your OpenNext application, also creating, if not already present, an `open-next.configs.ts` file for you.
@@ -139,7 +115,7 @@ This is necessary if you want to deploy your application with a GibHub/GitLab in
139115
Either deploy via the command line:
140116

141117
```sh
142-
npm run deploy:worker
118+
npm run deploy
143119
```
144120

145121
Or [connect a GitHub or GitLab repository](/workers/ci-cd/), and Cloudflare will automatically build and deploy each pull request you merge to your production branch.

0 commit comments

Comments
 (0)