Настройка Webpack

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

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

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

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

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Important: return the modified config
    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:

// Example config for adding a loader that depends on babel-loader
// This source was taken from the @next/mdx plugin source:
// 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 и Server Components в edge runtime.