カスタム Webpack 設定

注意: webpack 設定への変更は semver でカバーされていないため、自己責任で実行してください。

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

• CSS のインポート
• CSS Modules
• Sass/SCSS のインポート
• Sass/SCSS Modules
• Babel 設定のカスタマイズ

よく要望される機能の一部はプラグインとして利用可能です。

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

webpack の使用を拡張するために、次のように next.config.js 内で webpack の設定を拡張する関数を定義できます。

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Important: return the modified config
    return config
  },
}

webpack 関数は3回実行されます。2回はサーバー (nodejs / edge runtime) 用、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 の使用例

// 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" は、現在プロキシと Server Components の edge runtime のみに使用されます。