Следующая конфигурация JS config с несколькими плагинами

Вот простой способ использовать несколько вложенных плагинов в Next.js

const withImages = require('next-images');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withImages({
    webpack(config, options) {
      return config
    }
  }))

Если вы хотите использовать один плагин, сделайте следующее:

const withImages = require('next-images');

module.export = withImages();

Для получения дополнительной информации о плагинах Next.js и их документации щелкните здесь: https://github.com/zeit/next-plugins/tree/master/packages

Плагин next-compose-plugins предоставляет более чистый API для включения и настройки плагинов для next.js.

Установить npm install --save next-compose-plugins

Используйте его в next.config.js:

// next.config.js
const withPlugins = require('next-compose-plugins');
const images = require('next-images');
const sass = require('@zeit/next-sass');
const typescript = require('@zeit/next-typescript');

// optional next.js configuration
const nextConfig = {
  useFileSystemPublicRoutes: false,
  distDir: 'build',
};

module.exports = withPlugins([

  // add a plugin with specific configuration
  [sass, {
    cssModules: true,
    cssLoaderOptions: {
      localIdentName: '[local]___[hash:base64:5]',
    },
  }],

  // add a plugin without a configuration
  images,

  // another plugin with a configuration
  [typescript, {
    typescriptLoaderOptions: {
      transpileOnly: false,
    },
  }],

], nextConfig);

Версия Next.js> 10.0.3

Изображения теперь встроены, поэтому можно добавить плагин и код изображения ниже:

const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css');

const nextConfig = {
    images: {
        domains: ['sd.domain.com'], // your domain
    },
};

module.exports = withPlugins([
    [withCSS]
], nextConfig);