Integrate with frameworks

​​ Next.js

Image transformations can be used automatically with the Next.js <Image /> component .

To use image transformations, define a global image loader or multiple custom loaders for each <Image /> component.

Next.js will request the image with the correct parameters for width and quality.

Image transformations will be responsible for caching and serving an optimal format to the client.

​​ Global Loader

To use Images with all your app’s images, define a global loaderFile for your app.

Add the following settings to the next.config.js file located at the root our your Next.js application.

Next, create the imageLoader.js file in the specified path (relative to the root of your Next.js application).

​​ Custom Loaders

Alternatively, define a loader for each <Image /> component.