Since version 10, next.js has a built in image component to make including images easy, responsive and optimized. It can do that with images stored on the server, but also with images stored on one of the many cloud based image optimization services. The usual suspects like cloudinary, imgix, etc are included in next.js. But we can also write a custom loader for our image optimization service rokka.
First write the custom image loader into some file in your setup like the following.
Of course, you can also use a defined rokka stack instead of the dynamic one used here. We also add the rokka stack option autoformat (or in short af) to deliver the best format the browser supports. Like WebP or JPEG-XL.
export const rokkaLoader = ({ src, width }) => {
return `https://liip.rokka.io/dynamic/resize-width-${width}/o-af-1/${src}`
}It's also recommended to define your device width breakpoints in next.config.js to avoid too many different sizes
module.exports = {
images: {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048],
},
}And then, whenever you want to display an image from rokka, you add the rokkaLoader defined above with the loader attribute from the Image component and use the rokka hash and some image name plus the format as the src.
import {rokkaLoader} from '../src/rokka.ts'
import Image from 'next/image'
...
<Image
src={'ad8472/some-name.jpg'}
objectFit={'cover'}
layout={'fill'}
loader={rokkaLoader}
/>The image name is optional, therefore ad8472.jpg would also work. But we recommend to use an image name for improved Search Engine Optimization.
You still have to upload the images to rokka before being able to use them here. For example with the rokka Dashboard. And then copy the hash from there. But depending how you manage your images and how your users are adding them, you can maybe automate this with the help of rokka.js.