Настройка конфигурации Webpack

Важно: изменения в конфигурации webpack не покрываются semver, поэтому действуйте на свой страх и риск

Прежде чем продолжить добавление пользовательской конфигурации webpack в ваше приложение, убедитесь, что Next.js уже не поддерживает ваш вариант использования:

• Импорт CSS
• CSS-модули
• Импорт Sass/SCSS
• Sass/SCSS модули

Некоторые часто запрашиваемые функции доступны в виде плагинов:

• @next/mdx
• @next/bundle-analyzer

Чтобы расширить использование webpack, вы можете определить функцию, которая изменяет его конфигурацию в файле next.config.js, например так:

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Важно: верните измененную конфигурацию
    return config
  },
}

Функция webpack выполняется три раза: дважды для сервера (nodejs / edge runtime) и один раз для клиента. Это позволяет различать конфигурацию клиента и сервера с помощью свойства isServer.

Второй аргумент функции webpack — это объект со следующими свойствами:

• buildId: String — Идентификатор сборки, используемый как уникальный идентификатор между сборками.
• dev: Boolean — Указывает, выполняется ли компиляция в режиме разработки.
• isServer: Boolean — Имеет значение true для серверной компиляции и false для клиентской.
• nextRuntime: String | undefined — Целевая среда выполнения для серверной компиляции: либо "edge", либо "nodejs", имеет значение undefined для клиентской компиляции.
• defaultLoaders: Object — Загрузчики по умолчанию, используемые внутри Next.js:
  • babel: Object — Конфигурация babel-loader по умолчанию.

Пример использования defaultLoaders.babel:

// Пример конфигурации для добавления загрузчика, который зависит от babel-loader
// Этот исходный код взят из исходного кода плагина @next/mdx:
// https://github.com/vercel/next.js/tree/canary/packages/next-mdx
module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.mdx/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: '@mdx-js/loader',
          options: pluginOptions.options,
        },
      ],
    })

    return config
  },
}

nextRuntime

Обратите внимание, что isServer имеет значение true, когда nextRuntime равен "edge" или "nodejs". В настоящее время nextRuntime "edge" используется только для middleware и серверных компонентов в среде выполнения edge.