From ffb3de1bd10d8d91c4708999a01397d96612a0fb Mon Sep 17 00:00:00 2001 From: Hinata Masaki Date: Fri, 28 Nov 2025 17:41:27 +0900 Subject: [PATCH 1/6] add image optimization docs --- pages/cloudflare/howtos/image.mdx | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/pages/cloudflare/howtos/image.mdx b/pages/cloudflare/howtos/image.mdx index 5375abb..9b5bd44 100644 --- a/pages/cloudflare/howtos/image.mdx +++ b/pages/cloudflare/howtos/image.mdx @@ -4,16 +4,35 @@ import { Callout } from "nextra/components"; Next.js has a builtin [`` component](https://nextjs.org/docs/pages/building-your-application/optimizing/images) to automatically optimize your images for faster page loads. -In this post, we will look at how to integrate the Next.js image optimization with [Cloudflare Images](https://developers.cloudflare.com/images) +### Use Cloudflare Images -### Enable Cloudflare Images +The Cloudflare adapter provides a Next.js-compatible image optimization API using [Cloudflare Images](https://developers.cloudflare.com/images/) that can be [configured with `next.config.js`](https://nextjs.org/docs/app/api-reference/components/image#configuration-options). -You first need to [enable Cloudflare Images](https://developers.cloudflare.com/images/get-started/#enable-transformations-on-your-zone) for your zone. +The `IMAGES` binding must be defined to enable image optimization. -It is strongly advised to restrict the image origins that can be transformed to where your images are hosted, i.e. a [R2 bucket](https://developers.cloudflare.com/r2/buckets/). +```jsonc +// wrangler.jsonc +{ + "images": { + "binding": "IMAGES", + }, +} +``` + +Image optimization can incur additional costs. See [Cloudflare Images pricing](https://developers.cloudflare.com/images/pricing/) for details. + +#### Compatibility notes + +- Only PNG, JPEG, WEBP, AVIF, GIF, and SVG are supported. Unsupported images will be returned unchanged without optimization. +- [`minimumCacheTTL` configuration](https://nextjs.org/docs/app/api-reference/components/image#minimumcachettl) is not supported. All assets (static, local, or remote) are handled as either immutable (cache forever) or not. Except for the `immutable` attribute, it does not respect the cache behavior set by the `Cache-Control` header for non-static images. +- [`dangerouslyAllowLocalIP` configuration](https://nextjs.org/docs/app/api-reference/components/image#dangerouslyallowlocalip) is not supported. Local IP addresses are always allowed if the URL is allowed by the `remotePatterns` configuration. ### Use a custom loader +You first need to [enable Cloudflare Images](https://developers.cloudflare.com/images/get-started/#enable-transformations-on-your-zone) for your zone. + +It is strongly advised to restrict the image origins that can be transformed to where your images are hosted, i.e. a [R2 bucket](https://developers.cloudflare.com/r2/buckets/). + You then need to configure your Next application to use a custom loader for Cloudflare Images. Create an `image-loader.ts` at the root of your application: From dd0427514b4d733d410c8249245795fe5c10a615 Mon Sep 17 00:00:00 2001 From: Hinata Masaki Date: Fri, 28 Nov 2025 19:38:29 +0900 Subject: [PATCH 2/6] fix period --- pages/cloudflare/howtos/image.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/cloudflare/howtos/image.mdx b/pages/cloudflare/howtos/image.mdx index 9b5bd44..30e3e29 100644 --- a/pages/cloudflare/howtos/image.mdx +++ b/pages/cloudflare/howtos/image.mdx @@ -8,7 +8,7 @@ Next.js has a builtin [`` component](https://nextjs.org/docs/pages/buildi The Cloudflare adapter provides a Next.js-compatible image optimization API using [Cloudflare Images](https://developers.cloudflare.com/images/) that can be [configured with `next.config.js`](https://nextjs.org/docs/app/api-reference/components/image#configuration-options). -The `IMAGES` binding must be defined to enable image optimization. +The `IMAGES` binding must be defined to enable image optimization: ```jsonc // wrangler.jsonc From dc9677db057e8216b7e90df83549c21d04d9ad9f Mon Sep 17 00:00:00 2001 From: Hinata Masaki Date: Fri, 28 Nov 2025 19:40:23 +0900 Subject: [PATCH 3/6] update intro --- pages/cloudflare/howtos/image.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/cloudflare/howtos/image.mdx b/pages/cloudflare/howtos/image.mdx index 30e3e29..db3ccb7 100644 --- a/pages/cloudflare/howtos/image.mdx +++ b/pages/cloudflare/howtos/image.mdx @@ -2,7 +2,7 @@ import { Callout } from "nextra/components"; ## Image Optimization -Next.js has a builtin [`` component](https://nextjs.org/docs/pages/building-your-application/optimizing/images) to automatically optimize your images for faster page loads. +Next.js has a builtin [`` component](https://nextjs.org/docs/pages/building-your-application/optimizing/images) to automatically optimize your images for faster page loads. To enable image optimization, you must either define an image binding or use a custom loader. ### Use Cloudflare Images From 476372d0173c1284c2e9385d83828ad955b9b162 Mon Sep 17 00:00:00 2001 From: Hinata Masaki Date: Fri, 28 Nov 2025 19:45:00 +0900 Subject: [PATCH 4/6] update get started configuration --- pages/cloudflare/get-started.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/pages/cloudflare/get-started.mdx b/pages/cloudflare/get-started.mdx index beb6e15..bb47dc4 100644 --- a/pages/cloudflare/get-started.mdx +++ b/pages/cloudflare/get-started.mdx @@ -76,6 +76,11 @@ You can create one yourself in the root directory of your Next.js app with the n // "bucket_name": "", // }, ], + "images": { + // Enable image optimization + // see https://opennext.js.org/cloudflare/howtos/image + "binding": "IMAGES" + } } ``` From 321dce73009402f4c956fe0e97844c4af20d68cd Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 28 Nov 2025 11:50:40 +0100 Subject: [PATCH 5/6] Apply suggestion from @vicb --- pages/cloudflare/howtos/image.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/cloudflare/howtos/image.mdx b/pages/cloudflare/howtos/image.mdx index db3ccb7..a11931a 100644 --- a/pages/cloudflare/howtos/image.mdx +++ b/pages/cloudflare/howtos/image.mdx @@ -4,7 +4,7 @@ import { Callout } from "nextra/components"; Next.js has a builtin [`` component](https://nextjs.org/docs/pages/building-your-application/optimizing/images) to automatically optimize your images for faster page loads. To enable image optimization, you must either define an image binding or use a custom loader. -### Use Cloudflare Images +### Use a Cloudflare Images binding The Cloudflare adapter provides a Next.js-compatible image optimization API using [Cloudflare Images](https://developers.cloudflare.com/images/) that can be [configured with `next.config.js`](https://nextjs.org/docs/app/api-reference/components/image#configuration-options). From 32cbc94b5e102d36f32b858b9b07efc676a65f1b Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 28 Nov 2025 11:52:25 +0100 Subject: [PATCH 6/6] fixup! format --- pages/cloudflare/get-started.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/cloudflare/get-started.mdx b/pages/cloudflare/get-started.mdx index bb47dc4..5b532e6 100644 --- a/pages/cloudflare/get-started.mdx +++ b/pages/cloudflare/get-started.mdx @@ -76,7 +76,7 @@ You can create one yourself in the root directory of your Next.js app with the n // "bucket_name": "", // }, ], - "images": { +pnpm fix "images": { // Enable image optimization // see https://opennext.js.org/cloudflare/howtos/image "binding": "IMAGES"