Image resizing can be used automatically with Next.js' next/image component.
Here is an implementation using a custom loader which applies ImageKit image resizing, next/image will set an optimal width and quality for a given client.
Inside the imageKitLoader
function, you will have to replace urlEndpoint
with your ImageKit account's URL endpoint. You can get URL endpoint from your ImageKit dashboard - https://imagekit.io/dashboard/url-endpoints.
import Image from "next/image"; const imageKitLoader = ({ src, width, quality }) => { if(src[0] === "/") src = src.slice(1); const params = [`w-${width}`]; if (quality) { params.push(`q-${quality}`); } const paramsString = params.join(","); var urlEndpoint = "https://ik.imagekit.io/your_imagekit_id"; if(urlEndpoint[urlEndpoint.length-1] === "/") urlEndpoint = urlEndpoint.substring(0, urlEndpoint.length - 1); return `${urlEndpoint}/${src}?tr=${paramsString}` } const MyImage = (props) => { return ( <Image loader={imageKitLoader} src="default-image.jpg" alt="Sample image" width={400} height={400} /> ); };