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 は、JSONファイルではなく、通常のNode.jsモジュールです。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 を使用している場合、設定に TypeScript を使用するには 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')