next.config.js オプション

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

// @ts-check
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  /* config options here */
}
 
module.exports = nextConfig

ECMAScript Modules

next.config.js は通常の Node.js モジュールであり、JSON ファイルではありません。Next.js サーバーおよびビルドフェーズで使用され、ブラウザビルドには含まれません。

もし ECMAScript modules が必要なら、next.config.mjs を使用できます。

// @ts-check
 
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
}
 
export default nextConfig

知っておくと便利：.cjs、.cts、または .mts 拡張子の next.config は現在サポートされていません。

関数としての設定

関数を使用することもできます。

// @ts-check
 
export default (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

非同期設定

Next.js 12.1.0 以降、非同期関数を使用できます。

// @ts-check
 
module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

フェーズ

phase は、設定がロードされる現在のコンテキストです。利用可能な フェーズ を確認できます。フェーズは next/constants からインポートできます。

// @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 を使用している場合、next.config.ts を使用して設定で TypeScript を使用できます。

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