アプリケーションの webpack の設定をカスタムし続ける前に、 Next.js があなたのユースケースをまだサポートしていないことを確認してください:
よく聞かれる機能には、プラグインとして利用できるものがあります:
webpack
の使い方を拡張するために、このように next.config.js
の中でその設定を拡張する関数を定義できます:
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// 重要: 変更された設定を返す
return config
},
}
webpack
関数は、サーバーとクライアントで2回実行されます。これにより、isServer
プロパティを用いてクライアントとサーバの設定を区別することができます。
webpack
関数の第二引数は以下のプロパティを持つオブジェクトです:
buildId
: String
- ビルド間の一意の識別子として使用されるビルド IDdev
: 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;
}
};