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` を使用します。

assetPrefix

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

basePath

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

bundlePagesRouterDependencies

Pages Router の自動依存関係バンドリングを有効化

compress

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

crossOrigin

next/script および `next/head` によって生成される `script` タグに crossOrigin タグを追加するための `crossOrigin` オプションについて説明します。

devIndicators

最適化されたページには、静的最適化が行われているかどうかを示すインジケーターが表示されます。ここで無効にすることができます。

distDir

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

env

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

ESLint

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

exportPathMap

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

generateBuildId

ビルド ID を設定します。この 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

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

output

Next.js は各ページで必要なファイルを自動的にトレースし、アプリケーションのデプロイを容易にします。その仕組みについて学びましょう。

pageExtensions

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

poweredByHeader

Next.js はデフォルトで `x-powered-by` ヘッダーを追加します。ここではその無効化方法を学びます。

productionBrowserSourceMaps

プロダクションビルド時にブラウザ用ソースマップの生成を有効にします。

reactStrictMode

Next.jsランタイム全体がStrict Mode準拠になりました。有効化方法を学びましょう

リダイレクト

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

rewrites

Next.jsアプリケーションにリライトを追加する方法

ランタイム設定

Next.jsアプリにクライアントとサーバーのランタイム設定を追加します。

serverExternalPackages

bundlePagesRouterDependencies による依存関係のバンドリングから特定の依存関係を除外します。

trailingSlash

Next.js ページの末尾スラッシュの有無を設定します。

transpilePackages

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

turbo

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

TypeScript

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

urlImports

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

useLightningcss

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

webpack

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

webVitalsAttribution

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

ESLint

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

allowedDevOrigins

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

On this page