Custom Webpack Config

Good to know: webpack の設定変更はセマンティックバージョニングの対象外です。自己責任で行ってください。

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

よく問い合わされる機能のいくつかは、プラグインとして提供されています：

Next.js によるwebpackの設定を拡張するには、次のようにnext.config.jsの中で設定を拡張する関数を定義します：

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

webpack関数は、サーバー用とクライアント用で 2 回実行されます。これにより、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"の場合、現在は Middleware とエッジランタイムの Server Components 専用です。

nextRuntime​

`nextRuntime`