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以降、async関数を使用できます。

next.config.js

// @ts-check
 
module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* ここに設定オプションを記述します */
  }
  return nextConfig
}

Phase

phaseは設定が読み込まれる現在のコンテキストです。利用可能なphaseを確認できます。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 {
    /* 開発環境以外のすべてのphaseの設定オプションをここに記述します */
  }
}

TypeScript

プロジェクトで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でパースされません。

このページは利用可能なすべての設定オプションをドキュメント化しています。

ユニットテスト（実験的）

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')

next.config.js

ECMAScriptモジュール

関数としての設定

非同期設定

Phase

TypeScript

ユニットテスト（実験的）

experimental.adapterPath

allowedDevOrigins

appDir

assetPrefix

authInterrupts

basePath

browserDebugInfoInTerminal

cacheComponents

cacheLife

compress

crossOrigin

CSSチャンキング

devIndicators

distDir

env

expireTime

exportPathMap

generateBuildId

generateEtags

headers

htmlLimitedBots

httpAgentOptions

images

cacheHandler

inlineCss

isolatedDevBuild

logging

mdxRs

onDemandEntries

optimizePackageImports

output

pageExtensions

poweredByHeader

productionBrowserSourceMaps

proxyClientMaxBodySize

reactCompiler

reactMaxHeadersLength

reactStrictMode

redirects

rewrites

sassOptions

サーバーアクション

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

serverExternalPackages

staleTimes

staticGeneration*

taint

trailingSlash

transpilePackages

turbopack

turbopackFileSystemCache

typedRoutes

typescript

URLインポート

useLightningcss

viewTransition

webVitalsAttribution

webpack