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}
    />
  );
};

Cloudflare Dashboard Discord Community Learning Center Support Portal