Cloudflare Docs
Cloudflare Image Optimization
Cloudflare Docs
Cloudflare Image Optimization
GitHub icon
Visit Cloudflare Image Optimization on GitHub
Set theme to dark (⇧+D)
  1. Products
  2. Cloudflare Image Optimization
  3. Cloudflare Image Resizing
  4. Integration with frameworks

Integration with frameworks

​​ Next.js

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

To use Image Resizing, 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 Resizing will be responsible for caching and serving an optimal format to the client.

​​ Global Loader

To use Image Resizing 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}
    />
  );

};