diff --git a/pages/cloudflare/caching.mdx b/pages/cloudflare/caching.mdx index 70072ad..b50eeab 100644 --- a/pages/cloudflare/caching.mdx +++ b/pages/cloudflare/caching.mdx @@ -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 ``` #### 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 = "" ``` - -### 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`. diff --git a/pages/cloudflare/get-started.mdx b/pages/cloudflare/get-started.mdx index 9958066..84a841d 100644 --- a/pages/cloudflare/get-started.mdx +++ b/pages/cloudflare/get-started.mdx @@ -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. -`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` @@ -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 = "" -``` - -#### 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) @@ -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: @@ -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`: