Integration with frameworks
Next.js
Image Resizing can be used automatically with Next.js’ next/image
component. With a custom loader which applies Cloudflare Image Resizing, next/image
will set an optimal width and quality for a given client.
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} /> );
};