🚀

【Next.js和訳】API Ref/next.config.js/Custom Webpack Config

2 min read

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、next.config.js/Custom Webpack Configの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Custom Webpack Config

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

よく聞かれる機能は、プラグインとして用意されています。

webpackの使い方を拡張するために、next.config.jsの中に、その config を拡張する関数を定義することができます、というように。

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // 重要:修正したコンフィグを返す
    return config
  },
}

webpack関数は、サーバー用とクライアント用の 2 回実行されます。これにより、isServerプロパティを使用して、クライアントとサーバーの構成を区別することができます。

webpack関数の第 2 引数には、以下のプロパティを持つオブジェクトを指定します。

  • buildId: String - ビルド ID。ビルド間の一意の識別子として使用されます。
  • dev: Boolean - コンパイルが開発段階で行われるかどうかを示します。
  • isServer: Boolean - サーバーサイドでコンパイルされる場合はtrue、クライアントサイドでコンパイルされる場合はfalseになります。
  • 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
  },
}

関連

https://nextjs.org/docs/api-reference/next.config.js/introduction

Discussion

ログインするとコメントできます