Menu

next.config.js オプション

Next.js は、プロジェクトディレクトリのルート（例：package.json の隣）にある next.config.js ファイルでデフォルトエクスポートを使用して設定できます。

next.config.js
// @ts-check
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  /* 設定オプションをここに記述 */
}
 
module.exports = nextConfig

ECMAScript モジュール

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 によって解析されません。

このページでは、利用可能なすべての設定オプションを文書化しています：

appDir

レイアウト、ストリーミングなどを使用するためにApp Routerを有効にする

assetPrefix

CDNを構成するためのassetPrefix設定オプションの使用方法を学びます。

basePath

ドメインのサブパス下にNext.jsアプリケーションをデプロイするために`basePath`を使用します。

cacheLife

Next.jsでcacheLifeの設定方法を学びます。

圧縮

Next.jsは、レンダリングされたコンテンツと静的ファイルをgzip圧縮し、これはサーバーターゲットでのみ動作します。詳細はこちらをご覧ください。

crossOrigin

next/script で生成される`script`タグに`crossOrigin`オプションを追加します。

CSSチャンキング

Next.jsアプリケーションでCSSファイルのチャンキング方法を制御するには、`cssChunking`オプションを使用します。

devIndicators

最適化されたページには、静的に最適化されているかどうかを知らせるインジケーターが含まれています。ここでオプトアウトできます。

distDir

デフォルトの .next ディレクトリの代わりにカスタムビルドディレクトリを設定します。

dynamicIO

Next.jsで dynamicIO フラグを有効にする方法を学びます。

env

Next.jsアプリケーションのビルド時に環境変数を追加およびアクセスする方法を学びます。

eslint

Next.jsはデフォルトでビルド時にESLintのエラーと警告を報告します。ここでこの挙動を無効にする方法を学びます。

expireTime

ISRが有効なページのstale-while-revalidate期限をカスタマイズします。

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ローダーのカスタム設定

カスタム Next.js キャッシュハンドラー

Redis、Memcachedなどの外部サービスを使用して、データの保存と再検証に使用される Next.js キャッシュを設定します。

ロギング

開発モードでNext.jsを実行する際、データフェッチのコンソールへのログ出力方法を設定します。

mdxRs

App Routerで新しいRustコンパイラを使用してMDXファイルをコンパイルします。

onDemandEntries

開発環境でNext.jsがページの破棄とメモリ保持をどのように設定するかを構成します。

optimizePackageImports

Next.js 設定オプション optimizePackageImports の API リファレンス

出力

Next.jsは、アプリケーションの簡単な展開を可能にするため、各ページに必要なファイルを自動的にトレースします。その仕組みについてここで学びます。

pageExtensions

Pages Routerでページを解決する際に、Next.jsのデフォルトのページ拡張子を拡張します。

poweredByHeader

Next.jsはデフォルトで`x-powered-by`ヘッダーを追加します。ここでオプトアウトする方法を学びます。

ppr

Next.jsでPartial Prerendering（部分的プリレンダリング）を有効にする方法について学びます。

productionBrowserSourceMaps

本番ビルド時にブラウザソースマップの生成を有効にします。

reactCompiler

コンポーネントのレンダリングを自動的に最適化するReact Compilerを有効にする

reactMaxHeadersLength

Reactによって送出され、レスポンスに追加されるヘッダーの最大長。

reactStrictMode

完全な Next.js ランタイムが現在 Strict Mode に準拠、オプトインする方法を学ぶ

リダイレクト

Next.js アプリにリダイレクトを追加します。

リライト

Next.jsアプリにリライトを追加します。

sassOptions

Sassコンパイラのオプションを設定します。

サーバーアクション

Next.js アプリケーションでのサーバーアクションの動作を設定します。

サーバーコンポーネントのHMRキャッシュ

Server Componentsでのfetchレスポンスをホットモジュール更新リクエスト間でキャッシュするかどうかを設定します。

serverExternalPackages

Server Componentsバンドリングから特定の依存関係を除外し、ネイティブのNode.js `require` を使用する

staleTimes

クライアントルーターキャッシュの無効化時間を上書きする方法を学びます。

staticGeneration*

Next.jsアプリケーションでスタティック生成を設定する方法を学びます。

trailingSlash

Next.jsのページをトレーリングスラッシュ（末尾のスラッシュ）ありなしで解決するよう設定します。

transpilePackages

ローカルパッケージ（モノリポなど）や外部依存関係（`node_modules`）からの依存関係を自動的にトランスパイルおよびバンドルします。

turbo

Turbopackに特化したオプションでNext.jsを設定します

typedRoutes

静的に型付けされたリンクの実験的サポートを有効にします。

typescript

Next.jsはデフォルトでTypeScriptエラーを報告します。この動作をオプトアウトする方法をここで学びます。

URLインポート

外部URLからモジュールをインポートするようにNext.jsを設定します。

useLightningcss

Lightning CSSの実験的サポートを有効にします。

webVitalsAttribution

Web Vitalsの問題の原因を特定する方法について説明します。

カスタムWebpack設定

Next.jsで使用されるwebpackの設定をカスタマイズする方法を学ぶ