logoNext.js
ドキュメントブログ学習
はじめに/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 = {
  /* ここに設定オプションを記述 */
}

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

プロジェクトでTypeScriptを使用している場合、next.config.ts を使用して設定ファイル内で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')

allowedDevOrigins

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

appDir

レイアウト、ストリーミングなどを利用可能にするApp Routerについて

assetPrefix

CDNを設定するためにassetPrefix設定オプションを使用する方法について学びましょう。

authInterrupts

実験的な `authInterrupts` 設定オプションを有効にして `forbidden` および `unauthorized` を使用する方法について学びます。

basePath

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

cacheLife

Next.jsでcacheLifeの設定方法を学びましょう。

圧縮 (compress)

Next.js はレンダリングされたコンテンツと静的ファイルを圧縮するために gzip 圧縮を提供します。この機能はサーバーターミナルでのみ動作します。詳細についてはこちらをご覧ください。

crossOrigin

next/script で生成される `script` タグに crossOrigin タグを追加するための `crossOrigin` オプションについて

cssChunking

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

devIndicators

開発中に表示される現在のルート情報を提供する画面上のインジケーターに関する設定オプションです。

distDir

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

dynamicIO

Next.js で dynamicIO フラグを有効にする方法について学びましょう。

env

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

eslint

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

expireTime

ISR（Incremental Static Regeneration）対応ページにおける stale-while-revalidate の有効期限をカスタマイズします。

exportPathMap

next export 使用時にHTMLファイルとしてエクスポートされるページをカスタマイズ

generateBuildId

アプリケーションが提供されている現在のビルドを識別するために使用されるビルドIDを設定します。

generateEtags

Next.js はデフォルトで全てのページに対して etag を生成します。etag 生成を無効化する方法について詳しく学びましょう。

HTTPヘッダー

Next.jsアプリケーションにカスタムHTTPヘッダーを追加する方法

htmlLimitedBots

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

httpAgentOptions

Next.js はデフォルトで HTTP Keep-Alive を自動的に使用します。ここでは HTTP Keep-Alive を無効にする方法について詳しく学びましょう。

images

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

cacheHandler

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

inlineCss

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

ロギング

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 (Partial Prerendering)

Next.jsでPartial Prerenderingを有効にする方法について学びましょう。

productionBrowserSourceMaps

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

reactCompiler

React Compiler を有効化してコンポーネントのレンダリングを自動最適化

reactMaxHeadersLength

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

reactStrictMode

Next.jsランタイム全体がStrict Modeに対応しました。有効化する方法を学びましょう

リダイレクト

Next.jsアプリにリダイレクトを追加する方法

リライト (rewrites)

Next.jsアプリにリライトを追加する方法

sassOptions

Sassコンパイラの設定オプション

serverActions

Next.js アプリケーションにおけるサーバーアクション (Server Actions) の動作設定について

serverComponentsHmrCache

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

serverExternalPackages

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

staleTimes

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

staticGeneration*（静的生成）

Next.jsアプリケーションで静的生成を設定する方法について学びましょう。

テイント (taint)

オブジェクトと値のテイント機能を有効化します。

trailingSlash

Next.js ページの URL 末尾スラッシュの有無を設定する方法について説明します。

transpilePackages

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

turbopack

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

typedRoutes

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

TypeScript

Next.js はデフォルトでTypeScriptエラーを報告します。この動作を無効にする方法について学びましょう。

urlImports

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

useCache

Next.js で useCache フラグを有効にする方法について学びましょう。

useLightningcss

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

viewTransition

App Router で React の ViewTransition API を有効化する

webpack

Next.js で使用される webpack 設定をカスタマイズする方法について学びましょう

webVitalsAttribution

webVitalsAttribution オプションを使用して Web Vitals の問題の原因を特定する方法について学びましょう。

ESLint

Next.jsアプリケーションで一般的な問題を検出するためのESLintプラグインの使用方法と設定方法について学びます。

allowedDevOrigins

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

On this page