next.config.js オプション
Next.js は、プロジェクトディレクトリのルート（例：package.json の隣）にある next.config.js ファイルでデフォルトエクスポートを使用して設定できます。
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 を使用できます：
next.config.mjs
// @ts-check
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/* 設定オプションをここに記述 */
}
export default nextConfig補足:
.cjs、.cts、.mts拡張子のnext.configは現在サポートされていません。
関数としての設定
関数を使用することもできます：
next.config.mjs
// @ts-check
export default (phase, { defaultConfig }) => {
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/* 設定オプションをここに記述 */
}
return nextConfig
}非同期設定
Next.js 12.1.0 以降、非同期関数を使用できます：
next.config.js
// @ts-check
module.exports = async (phase, { defaultConfig }) => {
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/* 設定オプションをここに記述 */
}
return nextConfig
}フェーズ
phase は設定がロードされる現在のコンテキストです。利用可能なフェーズを確認できます。フェーズは next/constants からインポートできます：
next.config.js
// @ts-check
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
module.exports = (phase, { defaultConfig }) => {
if (phase === PHASE_DEVELOPMENT_SERVER) {
return {
/* 開発環境のみの設定オプションをここに記述 */
}
}
return {
/* 開発環境以外のすべてのフェーズの設定オプションをここに記述 */
}
}TypeScript
この機能は Next.js カナリー版から利用可能です。
プロジェクトで TypeScript を使用している場合、設定で TypeScript を使用するために next.config.ts を使用できます：
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 によって解析されません。
このページでは、利用可能なすべての設定オプションを文書化しています：
assetPrefix
CDNを設定するためのassetPrefixコンフィグオプションの使い方を学びます。
basePath
Next.jsアプリケーションをドメインのサブパスにデプロイするための `basePath` の使用
bundlePagesRouterDependencies
Pages Router 向けの自動依存関係バンドルを有効化
圧縮
Next.jsは、レンダリングされたコンテンツと静的ファイルをgzip圧縮する機能を提供し、これはサーバーターゲットでのみ動作します。詳細はこちらをご覧ください。
crossOrigin
next/scriptと`next/head`で生成されたスクリプトタグに`crossOrigin`オプションを追加します。
devIndicators
静的に最適化されているページには、それを知らせるインジケーターが含まれます。ここでオプトアウトできます。
distDir
デフォルトの .next ディレクトリの代わりにカスタムビルドディレクトリを設定します。
env
Next.jsアプリケーションでビルド時に環境変数を追加およびアクセスする方法を学びます。
eslint
Next.jsはデフォルトでビルド時にESLintのエラーと警告を報告します。その動作をオプトアウトする方法はここで学べます。
exportPathMap
next export 使用時にHTMLファイルとしてエクスポートされるページをカスタマイズします。
generateBuildId
アプリケーションが提供される現在のビルドを識別するために使用されるビルドIDを設定します。
generateEtags
Next.jsはデフォルトで各ページのetag（エンティティタグ）を生成します。etag生成の無効化方法について詳しく学びます。
ヘッダー
Next.jsアプリにカスタムHTTPヘッダーを追加します。
httpAgentOptions
Next.jsはデフォルトでHTTP Keep-Aliveを自動的に使用します。HTTP Keep-Aliveを無効にする方法についてここで詳しく学びます。
images
next/image ローダーのカスタム設定
onDemandEntries
開発中に作成されたページをメモリに保持またはどのように破棄するかを設定します。
optimizePackageImports
Next.js 設定オプション optimizePackageImports の API リファレンス
output
Next.jsは各ページに必要なファイルを自動的に追跡し、アプリケーションの簡単なデプロイを可能にします。その仮組みについてここで学びます。
pageExtensions
Pages ルーターでページを解決する際に、Next.js がデフォルトで使用するページ拡張子を拡張します。
poweredByHeader
Next.jsはデフォルトで`x-powered-by`ヘッダーを追加します。ここでオプトアウトする方法を学びます。
productionBrowserSourceMaps
本番ビルド時にブラウザのソースマップ生成を有効にします。
reactStrictMode
Next.jsのランタイム全体が現在Strict Modeに準拠しており、オプトインする方法を学びます
リダイレクト
Next.jsアプリにリダイレクトを追加します。
リライト
Next.js アプリにリライトを追加します。
ランタイム設定
Next.jsアプリにクライアントおよびサーバーのランタイム設定を追加します。
serverExternalPackages
bundlePagesRouterDependencies によって有効化される依存パッケージのバンドリングから特定の依存パッケージをオプトアウトします。
trailingSlash
Next.jsのページを末尾のスラッシュ付きまたは削除のいずれかで解決するよう設定します。
transpilePackages
ローカルパッケージ（モノレポなど）や外部依存関係（`node_modules`）からの依存関係を自動的にトランスパイルおよびバンドルします。
turbo
Turbopack固有のオプションでNext.jsを設定する
typescript
Next.jsはデフォルトでTypeScriptエラーを報告します。ここでその動作をオプトアウトする方法を学びます。
urlImports
外部URLからモジュールをインポートするように Next.js を設定します。
useLightningcss
Lightning CSSの実験的サポートを有効にします。
webVitalsAttribution
Web Vitalsの問題の発生源を特定するためのwebVitalsAttributionオプションの使用方法について学びます。
カスタムWebpack設定
Next.jsで使用されるwebpackの設定をカスタマイズする方法を学ぶ