Menu

カスタム Webpack 設定

補足：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 回実行されます。サーバー用に 2 回（nodejs / edge ランタイム）、クライアント用に 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" は現在、edge ランタイムのプロキシと Server Components のみです。