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
Copy file name to clipboardExpand all lines: pages/cloudflare/caching.mdx
+16Lines changed: 16 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -212,6 +212,22 @@ For staging, when your site receives low traffic from a single IP, you can repla
212
212
213
213
### References
214
214
215
+
#### Static Assets Caching
216
+
217
+
<Callouttype="info">
218
+
The worker doesn't run **in front** of static assets, so the `headers` option of `next.config.ts` doesn't
219
+
apply to public files (`public`) and immutable build files (like `_next/static`).
220
+
</Callout>
221
+
222
+
By default, Cloudflare [Static Assets headers](https://developers.cloudflare.com/workers/static-assets/headers/#default-headers) use `max-age=0` with `must-revalidate`, allowing the browser to cache assets but with a revalidation request. This is the [same default behavior as the `public` folder on Next.js](https://nextjs.org/docs/app/api-reference/file-conventions/public-folder#caching).
223
+
224
+
Next.js also generates _immutable_ files that don't change between builds. Those files will also be served from Static Assets. To match the [default cache behavior of immutable assets in Next.js](https://nextjs.org/docs/app/guides/self-hosting#automatic-caching), avoiding unnecessary revalidation requests, add the following header to the [`public/_headers`](https://developers.cloudflare.com/workers/static-assets/headers/#custom-headers) file:
225
+
226
+
```txt
227
+
/_next/static/*
228
+
Cache-Control: public,max-age=31536000,immutable
229
+
```
230
+
215
231
#### Incremental Static Regeneration (ISR)
216
232
217
233
There are 3 storage options for the incremental cache:
Copy file name to clipboardExpand all lines: pages/cloudflare/get-started.mdx
+17-6Lines changed: 17 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -138,21 +138,32 @@ Add the following to the scripts field of your `package.json` file:
138
138
-`npm run upload`: Builds your app, and then uploads a new [version](https://developers.cloudflare.com/workers/configuration/versions-and-deployments/#versions) of it to Cloudflare.
139
139
-`cf-typegen`: Generates a `cloudflare-env.d.ts` file at the root of your project containing [the types for the `env`](https://developers.cloudflare.com/workers/wrangler/commands/#types).
140
140
141
-
##### 7. Add caching with Cloudflare R2
141
+
##### 7. Add Static Asset Caching
142
+
143
+
Add a `public/_headers` file, with at least the following headers:
144
+
145
+
```txt
146
+
/_next/static/*
147
+
Cache-Control: public,max-age=31536000,immutable
148
+
```
149
+
150
+
See the [Static Assets Caching docs](/cloudflare/caching#static-assets-caching) for more information.
151
+
152
+
##### 8. Add caching with Cloudflare R2
142
153
143
154
See the [Caching docs](/cloudflare/caching) for information on enabling Next.js caching in your OpenNext project.
144
155
145
-
##### 8. Remove any `export const runtime = "edge";` if present
156
+
##### 9. Remove any `export const runtime = "edge";` if present
146
157
147
158
Before deploying your app, remove the `export const runtime = "edge";` line from any of your source files.
148
159
149
160
The edge runtime is not supported yet with `@opennextjs/cloudflare`.
150
161
151
-
##### 9. Add `.open-next` to `.gitignore`
162
+
##### 10. Add `.open-next` to `.gitignore`
152
163
153
164
You should add `.open-next` to your `.gitignore` file to prevent the build output from being committed to your repository.
0 commit comments