next.config.js のオプション
Next.jsはプロジェクトディレクトリのルート（例えばpackage.jsonの横）に配置されたnext.config.jsファイルを通じてデフォルトエクスポートで設定できます。
// @ts-check
/** @type {import('next').NextConfig} */
const nextConfig = {
/* ここに設定オプションを記述します */
}
module.exports = nextConfigECMAScriptモジュール
next.config.jsは通常のNode.jsモジュールで、JSONファイルではありません。Next.jsサーバーとビルドフェーズで使用され、ブラウザビルドには含まれません。
ECMAScriptモジュールが必要な場合は、next.config.mjsを使用できます。
// @ts-check
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/* ここに設定オプションを記述します */
}
export default nextConfig補足：
.cjs、.cts、または.mts拡張子を持つnext.configは現在サポートされていません。
関数としての設定
関数を使用することもできます。
// @ts-check
export default (phase, { defaultConfig }) => {
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/* ここに設定オプションを記述します */
}
return nextConfig
}非同期設定
Next.js 12.1.0以降、async関数を使用できます。
// @ts-check
module.exports = async (phase, { defaultConfig }) => {
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/* ここに設定オプションを記述します */
}
return nextConfig
}Phase
phaseは設定が読み込まれる現在のコンテキストです。利用可能なphaseを確認できます。Phaseはnext/constantsからインポートできます。
// @ts-check
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
module.exports = (phase, { defaultConfig }) => {
if (phase === PHASE_DEVELOPMENT_SERVER) {
return {
/* 開発環境のみの設定オプションをここに記述します */
}
}
return {
/* 開発環境以外のすべてのphaseの設定オプションをここに記述します */
}
}TypeScript
プロジェクトでTypeScriptを使用している場合、設定でTypeScriptを使用するためにnext.config.tsを使用できます。
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
/* ここに設定オプションを記述します */
}
export default nextConfigコメント行はnext.config.jsで許可されている設定を配置できる場所で、これはこのファイルで定義されているものです。
ただし、どの設定も必須ではなく、各設定が何をするかを理解する必要はありません。代わりに、このセクションで有効にしたり変更したりする必要のある機能を検索すれば、実行方法が表示されます。
ターゲットNode.jsバージョンで利用できない新しいJavaScript機能の使用を避けてください。
next.config.jsはWebpackやBabelでパースされません。
このページは利用可能なすべての設定オプションをドキュメント化しています。
ユニットテスト（実験的）
Next.js 15.1から、next/experimental/testing/serverパッケージにはnext.config.jsファイルをユニットテストするのに役立つユーティリティが含まれています。
unstable_getResponseFromNextConfig関数は提供されたリクエスト情報でnext.config.jsからheaders、redirects、およびrewrites関数を実行し、ルーティングの結果を含むNextResponseを返します。
unstable_getResponseFromNextConfigからのレスポンスはnext.config.jsフィールドのみを考慮し、プロキシまたはファイルシステムルートを考慮しないため、本番環境の結果はユニットテストと異なる場合があります。
import {
getRedirectUrl,
unstable_getResponseFromNextConfig,
} from 'next/experimental/testing/server'
const response = await unstable_getResponseFromNextConfig({
url: 'https://nextjs.org/test',
nextConfig: {
async redirects() {
return [{ source: '/test', destination: '/test2', permanent: false }]
},
},
})
expect(response.status).toEqual(307)
expect(getRedirectUrl(response)).toEqual('https://nextjs.org/test2')