︙

Custom Webpack Config

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

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

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

webpackの使用範囲を広げるために、その config を拡張する関数をnext.config.jsの中に定義することができます。以下のように行います：

next.config.js

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

webpack関数は三回実行されます。二回は server(nodejs/edge runtime)のために、一回は client のためにです。これにより、isServerプロパティを使用して client と server の構成を区別することができます。

webpack関数への second 引数は、以下のプロパティを持つ object です：

buildId: String - build の ID で、ビルド間での一意の識別子として使用されます
dev: Boolean - コンパイルが development で行われるかどうかを示します
isServer： Boolean - server-side コンパイルの場合はtrue、Client サイドのコンパイルの場合はfalseです。
"nextRuntime: String | undefined - target runtime は server-side のコンパイルのためで、"edge"または"nodejs"を選びます。Client サイドのコンパイルの場合、undefinedになります。
defaultLoaders: Object - Default ローダーは、Next.js が内部で使用します:
- babel： Object - Default 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"の場合です。"edge"の nextRuntime は現在、 middleware および Server Components 用で、これらは edge runtime 内でのみ有効です。