Skip to content

Commit

Permalink
add kv cache name env var to docs + fix a couple errors
Browse files Browse the repository at this point in the history
  • Loading branch information
james-elicx committed Oct 9, 2024
1 parent b5c3a85 commit 0d8854f
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 28 deletions.
10 changes: 4 additions & 6 deletions pages/cloudflare/caching.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,22 @@ Workers KV is eventually consistent, which means that it can take up to 60 secon

### How to enable caching

`opennextjs/cloudflare` uses [Workers KV](https://developers.cloudflare.com/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](https://developers.cloudflare.com/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 subsequent requests anywhere around the world can read from this cache.
`@opennextjs/cloudflare` uses [Workers KV](https://developers.cloudflare.com/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](https://developers.cloudflare.com/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 subsequent requests anywhere around the world can read from this cache.

To enable caching, you must:

#### 1. Create a KV namespace

```
npx wrangler@latest kv namespace create NEXT_CACHE_WORKERS_KV
npx wrangler@latest kv namespace create <YOUR_NAMESPACE_NAME>
```

#### 2. Add the KV namespace to your Worker

The binding name used in your app's worker will be `NEXT_CACHE_WORKERS_KV` by default. This is configurable and can be changed by setting the `__OPENNEXT_KV_BINDING_NAME` build-time environment variable.

```
[[kv_namespaces]]
binding = "NEXT_CACHE_WORKERS_KV"
id = "<YOUR_NAMESPACE_ID>"
```

### 3. Set the name of the binding to `NEXT_CACHE_WORKERS_KV`

As shown above, the name of the binding that you configure for the KV namespace must be set to `NEXT_CACHE_WORKERS_KV`.
26 changes: 4 additions & 22 deletions pages/cloudflare/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ assets = { directory = ".worker-next/assets", binding = "ASSETS" }
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.
</Callout>

`wrangler.toml` is where you configure your Worker and define what resources it can access via [bindings](/workers/runtime-apis/bindings/).
`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).

##### 3. Update `package.json`

Expand All @@ -67,27 +67,7 @@ Add the following to the scripts field of your `package.json` file:

### 4. Add caching with Workers KV

`opennextjs/cloudflare` uses [Workers KV](https://developers.cloudflare.com/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](https://developers.cloudflare.com/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 subsequent requests anywhere around the world can read from this cache.

To enable caching, you must:

##### Create a KV namespace

```
npx wrangler@latest kv namespace create NEXT_CACHE_WORKERS_KV
```

##### Add the KV namespace to your Worker

```
[[kv_namespaces]]
binding = "NEXT_CACHE_WORKERS_KV"
id = "<YOUR_NAMESPACE_ID>"
```

#### Set the name of the binding to `NEXT_CACHE_WORKERS_KV`

As shown above, the name of the binding that you configure for the KV namespace must be set to `NEXT_CACHE_WORKERS_KV`.
See the [Caching docs](/cloudflare/caching) for information on enabling Next.js caching in your OpenNext project.

### 5. Remove `@cloudflare/next-on-pages` (if necessary)

Expand Down Expand Up @@ -116,6 +96,7 @@ In `package.json`:
"devDependencies": {
- "@cloudflare/next-on-pages": "*",
```

(remember to also remove [eslint-plugin-next-on-pages](https://www.npmjs.com/package/eslint-plugin-next-on-pages) from your `.eslintrc.js` file)

You no longer need to call `setupDevPlatform()` in your `next.config.mjs` file:
Expand All @@ -129,6 +110,7 @@ const nextConfig = {};
- if (process.env.NODE_ENV === 'development') {
- await setupDevPlatform();
- }
```

And you'll want to replace any uses of `getRequestContext` from `@cloudflare/next-on-pages` with `getCloudflareContext` from `@opennextjs/cloudflare`:

Expand Down

0 comments on commit 0d8854f

Please sign in to comment.