カスタムWebpack設定

補足: webpack設定の変更はsemverの対象外のため、自己責任で進めてください

アプリケーションにカスタムwebpack設定を追加する前に、Next.jsがすでにユースケースをサポートしていないか確認してください：

• CSS imports
• CSSモジュール
• Sass/SCSS imports
• Sass/SCSSモジュール

一般的に要求される機能は、プラグインとして利用可能です：

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

webpackの使用を拡張するには、next.config.js内でその設定を拡張する関数を定義できます：

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // 重要: 変更された設定を返す
    return config
  },
}

webpack関数は3回実行されます。サーバー（nodejs / edge runtime）に対して2回、クライアントに対して1回実行されます。これにより、isServerプロパティを使用してクライアントとサーバーの設定を区別できます。

webpack関数の2番目の引数は、以下のプロパティを持つオブジェクトです：

• 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

nextRuntimeが"edge"または"nodejs"の場合、isServerはtrueになることに注意してください。現在、nextRuntime "edge"はミドルウェアとエッジランタイム専用のServer Componentsのみに適用されます。