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

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

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

• Импорт CSS
• CSS-модули
• Импорт Sass/SCSS
• Sass/SCSS модули
• Настройка конфигурации Babel

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

• @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 — ID сборки, используемый как уникальный идентификатор между сборками
• 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". В настоящее время "edge" используется только для middleware и серверных компонентов в среде выполнения edge.