diff --git a/pages/cloudflare/get-started.mdx b/pages/cloudflare/get-started.mdx index beb6e15..5b532e6 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": "", // }, ], +pnpm fix "images": { + // Enable image optimization + // see https://opennext.js.org/cloudflare/howtos/image + "binding": "IMAGES" + } } ``` diff --git a/pages/cloudflare/howtos/image.mdx b/pages/cloudflare/howtos/image.mdx index 5375abb..a11931a 100644 --- a/pages/cloudflare/howtos/image.mdx +++ b/pages/cloudflare/howtos/image.mdx @@ -2,18 +2,37 @@ 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. -In this post, we will look at how to integrate the Next.js image optimization with [Cloudflare Images](https://developers.cloudflare.com/images) +### Use a Cloudflare Images binding -### 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: