next.config.js のオプション
Next.js は、プロジェクトディレクトリのルート（例えば、package.jsonと同じ場所）にある next.config.js ファイルでデフォルトのエクスポートを使って構成できます。
next.config.js
// @ts-check
/** @type {import('next').NextConfig} */
const nextConfig = {
/* config options here */
}
module.exports = nextConfigECMAScript モジュール
next.config.js は、JSON ファイルではなく、通常の Node.js モジュールです。Next.js サーバーとビルドフェーズで使用され、ブラウザのビルドには含まれません。
ECMAScript モジュールが必要な場合は、next.config.mjsを使用できます。
next.config.mjs
// @ts-check
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/* config options here */
}
export default nextConfig知っておくと良いこと:
.cjs、.cts、または.mts拡張子を持つnext.configは現在サポートされていません。
関数としての構成
関数を使用することもできます。
next.config.mjs
// @ts-check
export default (phase, { defaultConfig }) => {
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/* config options here */
}
return nextConfig
}非同期構成
Next.js 12.1.0以降では、非同期関数を使用できます。
next.config.js
// @ts-check
module.exports = async (phase, { defaultConfig }) => {
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
/* config options here */
}
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 {
/* development only config options here */
}
}
return {
/* config options for all phases except development here */
}
}TypeScript
この機能は Next.js Canary から利用できます。
プロジェクトで TypeScript を使用している場合は、next.config.ts を使用して構成で TypeScript を使用できます。
next.config.ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
/* config options here */
}
export default nextConfigコメント行は、next.config.js で許可されている設定を記述できる場所です。これらの設定はこのファイルで定義されています。
ただし、設定は必須ではなく、各設定が何をするのかを理解する必要はありません。代わりに、このセクションで有効化または変更する必要のある機能を探してください。それらは何をすべきかを教えてくれます。
ターゲットの Node.js バージョンで利用できない新しい JavaScript 機能の使用は避けてください。
next.config.jsは Webpack や Babel によって解析されません。
このページでは、利用可能なすべての設定オプションについて説明します。
assetPrefix
CDNを設定するための assetPrefix 設定オプションの使用方法について学びます。
basePath
ドメインのサブパスに Next.js アプリケーションをデプロイするには、`basePath` を使用します。
bundlePagesRouterDependencies
Pages Router の自動依存関係バンドルを有効にします。
compress
Next.js は、レンダリングされたコンテンツと静的ファイルを圧縮するために gzip 圧縮を提供します。これは、サーバーターゲットでのみ機能します。詳細はこちらをご覧ください。
crossOrigin
`crossOrigin` オプションを使用して、`next/script` および `next/head` によって生成された `script` タグに crossOrigin タグを追加します。
devIndicators
最適化されたページには、静的に最適化されているかどうかを知らせるインジケーターが含まれています。ここでオプトアウトできます。
distDir
デフォルトの .next ディレクトリの代わりに、カスタムのビルドディレクトリを設定します。
env
ビルド時に Next.js アプリケーションに環境変数を追加してアクセスする方法を学びます。
eslint
Next.js は、デフォルトでビルド中に ESLint のエラーと警告を報告します。この動作をオプトアウトする方法をこちらで学びます。
exportPathMap
`next export` を使用する場合に HTML ファイルとしてエクスポートされるページをカスタマイズします。
generateBuildId
アプリケーションが提供されている現在のビルドを識別するために使用されるビルド ID を設定します。
generateEtags
Next.js は、デフォルトですべてのページに etag を生成します。etag 生成を無効にする方法について、こちらで詳細をご覧ください。
headers
Next.js アプリにカスタム HTTP ヘッダーを追加します。
httpAgentOptions
Next.js は、デフォルトで HTTP Keep-Alive を自動的に使用します。HTTP Keep-Alive を無効にする方法については、こちらをご覧ください。
images
next/image ローダーのカスタム設定
onDemandEntries
Next.js が開発中に作成されたページをどのように破棄し、メモリに保持するかを設定します。
optimizePackageImports
optimizePackageImports Next.js 設定オプションの API リファレンス
output
Next.js は、アプリケーションの簡単なデプロイを可能にするために、各ページで必要なファイルを自動的にトレースします。その仕組みについて、こちらをご覧ください。
pageExtensions
Pages Router でページを解決する際に Next.js が使用するデフォルトのページ拡張子を拡張します。
poweredByHeader
Next.js は、デフォルトで `x-powered-by` ヘッダーを追加します。ここからオプトアウトする方法を学びます。
productionBrowserSourceMaps
本番ビルド中にブラウザのソースマップの生成を有効にします。
reactStrictMode
Next.js の完全なランタイムが Strict Mode に準拠するようになりました。オプトインする方法を学びます。
redirects
Next.js アプリにリダイレクトを追加します。
rewrites
Next.js アプリにリライトを追加します。
Runtime Config
クライアントおよびサーバーのランタイム構成を 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 の実験的サポートを有効にします。
webpack
Next.js で使用される webpack 設定をカスタマイズする方法を学びます。
webVitalsAttribution
webVitalsAttribution オプションを使用して、Web Vitals の問題の原因を特定する方法を学びます。
これは役立ちましたか？