コンテンツをスキップ
APIリファレンス設定next.config.js

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 = 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 = {
  /* 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

プロジェクトでTypeScriptを使用している場合、設定でTypeScriptを使用するためにnext.config.tsを使用できます。

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によってパースされません。

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

単体テスト (実験的)

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.dokyumento.jp/test',
  nextConfig: {
    async redirects() {
      return [{ source: '/test', destination: '/test2', permanent: false }]
    },
  },
})
expect(response.status).toEqual(307)
expect(getRedirectUrl(response)).toEqual('https://nextjs.dokyumento.jp/test2')

allowedDevOrigins

開発サーバーがリクエストできる追加のオリジンを設定するには、`allowedDevOrigins`を使用します。

appDir

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

assetPrefix

`assetPrefix`設定オプションを使用してCDNを設定する方法を学びます。

authInterrupts

`forbidden`と`unauthorized`を使用するために、実験的な`authInterrupts`設定オプションを有効にする方法を学びます。

basePath

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

cacheLife

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

compress

Next.jsはレンダリングされたコンテンツと静的ファイルを圧縮するためにgzip圧縮を提供しており、これはサーバーターゲットでのみ機能します。詳細はこちら。

crossOrigin

`crossOrigin`オプションを使用して、`next/script`によって生成される`script`タグにcrossOriginタグを追加します。

cssChunking

`cssChunking`オプションを使用して、Next.jsアプリケーションでCSSファイルがどのようにチャンクされるかを制御します。

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生成を無効にする方法はこちらで学びます。

headers

Next.jsアプリにカスタムHTTPヘッダーを追加します。

htmlLimitedBots

ブロッキングメタデータを受け取るユーザーエージェントのリストを指定します。

httpAgentOptions

Next.jsはデフォルトで自動的にHTTP Keep-Aliveを使用します。HTTP Keep-Aliveを無効にする方法はこちらで学びます。

images

`next/image`ローダーのカスタム設定。

cacheHandler

データストレージと再検証に使用されるNext.jsキャッシュを、Redis、Memcached、その他の外部サービスを使用するように設定します。

inlineCss

インラインCSSのサポートを有効にします。

logging

開発モードでNext.jsを実行する際に、データのフェッチがコンソールにどのようにログされるかを設定します。

mdxRs

App RouterでMDXファイルをコンパイルするために、新しいRustコンパイラを使用します。

onDemandEntries

Next.jsが開発中に作成されたページをどのように破棄し、メモリに保持するかを設定します。

optimizePackageImports

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

output

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

pageExtensions

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

poweredByHeader

Next.jsはデフォルトで`x-powered-by`ヘッダーを追加します。これを無効にする方法はこちら。

ppr

Next.jsで部分的なプリレンダリングを有効にする方法を学びます。

productionBrowserSourceMaps

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

reactCompiler

Reactコンパイラを有効にして、コンポーネントのレンダリングを自動的に最適化します。

reactMaxHeadersLength

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

reactStrictMode

Next.jsランタイム全体がStrictModeに準拠するようになりました。オプトインする方法を学びます。

redirects

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

rewrites

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

sassOptions

Sassオプションを設定します。

serverActions

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

serverComponentsHmrCache

サーバーコンポーネントでのフェッチ応答がHMRリフレッシュリクエスト間でキャッシュされるかどうかを設定します。

serverExternalPackages

サーバーコンポーネントのバンドリングから特定の依存関係を除外し、ネイティブのNode.js `require`を使用します。

staleTimes

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

staticGeneration*

Next.jsアプリケーションでの静的生成を設定する方法を学びます。

trailingSlash

Next.jsのページを末尾のスラッシュあり、またはなしで解決するように設定します。

transpilePackages

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

turbopack

Turbopack固有のオプションでNext.jsを設定します。

typedRoutes

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

typescript

Next.jsはデフォルトでTypeScriptのエラーを報告します。この動作を無効にする方法はこちら。

urlImports

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

useCache

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

useLightningcss

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

ViewTransition

App RouterでReactのViewTransition APIを有効にします。

webpack

Next.jsが使用するwebpack設定をカスタマイズする方法を学びます。

webVitalsAttribution

Web Vitalsの問題の原因を特定するために、`webVitalsAttribution`オプションを使用する方法を学びます。