Next-image-loader NPM

:city_sunrise: next-image-loader

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.

Installation

npm install --save next-image-loader

Usage

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}`
}