Cloudflare Docs
Cloudflare Image Optimization
Cloudflare Docs
Cloudflare Image Optimization
Edit this page
Report an issue with this page
Log into the Cloudflare dashboard
Set theme to dark (⇧+D)
  1. Products
  2. Cloudflare Image Optimization
  3. Transform images
  4. Integrate with frameworks

Integrate with frameworks

​​ Next.js

Image transformations can be used automatically with the Next.js <Image /> component.

To use image transformations, define a global image loader or multiple custom loaders for each <Image /> component.

Next.js will request the image with the correct parameters for width and quality.

Image transformations will be responsible for caching and serving an optimal format to the client.

​​ Global Loader

To use Images with all your app’s images, define a global loaderFile for your app.

Add the following settings to the next.config.js file located at the root our your Next.js application.

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },

}

Next, create the imageLoader.js file in the specified path (relative to the root of your Next.js application).

const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;

};



export default function cloudflareLoader ({ src, width, quality }) {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;

};

​​ Custom Loaders

Alternatively, define a loader for each <Image /> component.

import Image from 'next/image';



const normalizeSrc = src => {
  return src.startsWith('/') ? src.slice(1) : src;

};



const cloudflareLoader = ({ src, width, quality }) => {
  const params = [`width=${width}`];
  if (quality) {
    params.push(`quality=${quality}`);
  }
  const paramsString = params.join(',');
  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;

};



const MyImage = props => {
  return (
    <Image
      loader={cloudflareLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );

};