STEP 1: Export a function for the custom loader
JavaScript
export const imageKitLoader = ({ src, width, quality }) => {
const IMAGEKIT = "https://ik.imagekit.io/osx1ctaoub8x/bdimage"; // REPLACE WITH THE PROJECT'S IMAGEKIT URL
if (src[0] === "/") src = src.slice(1);
const params = [`w-${width}`];
if (quality) {
params.push(`q-${quality}`);
}
const paramsString = params.join(",");
var urlEndpoint = IMAGEKIT;
if (urlEndpoint[urlEndpoint.length - 1] === "/")
urlEndpoint = urlEndpoint.substring(0, urlEndpoint.length - 1);
return `${urlEndpoint}/${src}?tr=${paramsString}`;
};STEP 2: Import this on whatever file uses the NextJS Image component
STEP 3: pass this function as the value to the loader prop of the image component
JavaScript
<Image
loader={imageKitLoader}
alt={title}
src={`/store/20180522154/assets/items/largeimages/${code}.jpg`}
fill
/>NOTE: Do not pass any width / height params to the imagekit file name, since the Image component will do this job for us.