Next.js
Real-time image resizing and automatic optimization in Next.js using ImageKit.io.
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.
1
import Image from "next/image";
2
3
const imageKitLoader = ({ src, width, quality }) => {
4
if(src[0] === "/") src = src.slice(1);
5
const params = [`w-${width}`];
6
if (quality) {
7
params.push(`q-${quality}`);
8
}
9
const paramsString = params.join(",");
10
var urlEndpoint = "https://ik.imagekit.io/your_imagekit_id";
11
if(urlEndpoint[urlEndpoint.length-1] === "/") urlEndpoint = urlEndpoint.substring(0, urlEndpoint.length - 1);
12
return `${urlEndpoint}/${src}?tr=${paramsString}`
13
}
14
15
const MyImage = (props) => {
16
return (
17
<Image
18
loader={imageKitLoader}
19
src="default-image.jpg"
20
alt="Sample image"
21
width={400}
22
height={400}
23
/>
24
);
25
};
Copied!
Last modified 1mo ago
Copy link