カスタム Webpack 設定

Good to know: webpack設定への変更はsemverにカバーされないため、自己責任で進めてください

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

一般的によく求められる機能はプラグインとして利用できます：

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

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`

isServerが"edge"または"nodejs"のときはtrueであることに注意してください。nextRuntime "edge"は現在、edge runtime内のミドルウェアとサーバーコンポーネントにのみ対応しています。

nextRuntime​

`nextRuntime`