🚨This library has already been marked as deprecated.🚨
Please consider Next.js v13, which already has the same functionality as this library.
https://nextjs.org/docs/api-reference/next/image#loader-configuration
This plugin enables you to transparently replace the loader of next/image with a self-defined custom loader.
For Next.js image optimization, you can choose Vercel (default), Imgix, Cloudinary, or Akamai, but if you want to use other providers (including self-hosting), you need to define the loader in the next/image props. This makes it very annoying to have to add a props every time you use next/image.
This plugin will relieve you of that stress by enabling you to self-define a custom loader in next.config.js and transparently reflect that loader throughout your project.
npm install --save next-image-loader
1. Write withImageLoader in next.config.js.
// next.config.js
const { withImageLoader } = require('next-image-loader')
module.exports = withImageLoader({
// write your next.js configuration values.
})If you are using next-compose-plugins
// next.config.js
const { withImageLoader } = require('next-image-loader')
const withImageLoader = require('next-image-loader')
module.exports = withPlugins([
withImageLoader
// your other plugins here
], {
// write your next.js configuration values.
})2. Create image-loader.config.js in your project root (in the same directory as next.config.js).
// image-loader.config.js
import { imageLoader } from 'next-image-loader/image-loader'
// write self-define a custom loader
// (resolverProps: { src: string; width: number; quality?: number }) => string
imageLoader.loader = ({ src, width, quality }) => {
const params = new URLSearchParams({ url: src, w: Math.min(width, 1080), q: quality || 75 })
return `${process.env.NEXT_PUBLIC_OPTIMIZE_DOMAIN}?${params}`
}Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
This project is licensed under the MIT License - see the LICENSE file for details