カスタム Webpack 設定
知っておくと便利: webpack設定の変更はsemverの対象外なので自己責任で行ってください
アプリケーションにカスタムwebpack設定を追加する前に、Next.jsがすでにあなたのユースケースをサポートしていないか確認してください:
よく要望のある機能の一部はプラグインとして利用可能です:
webpack
の使用を拡張するために、next.config.js
内で設定を拡張する関数を次のように定義できます:
module.exports = {
webpack: (
config,
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
) => {
// 重要: 変更した設定を返す
return config
},
}
webpack
関数はサーバー用とクライアント用の2回実行されます。これによりisServer
プロパティを使用してクライアントとサーバーの設定を区別できます。
webpack
関数の第二引数は以下のプロパティを持つオブジェクトです:
buildId
:String
- ビルド間で一意の識別子として使用されるビルドIDdev
: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"
は現在、エッジランタイムでのミドルウェアとサーバーコンポーネント専用です。