Skip to content

add kv cache name env var to docs + fix a couple errors #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 12, 2024
Merged

add kv cache name env var to docs + fix a couple errors #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions pages/cloudflare/caching.mdx
View file
Open in desktop
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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about re-using <YOUR_NAMESPACE_NAME> and add a note about the default value at the bottom of this section.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the binding name can differ from the namespace name (and maybe should if you have multiple next.js apps or preview vs prod), so i'm not sure that would be the right recommendation


```
[[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
View file
Open in desktop
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
Loading