next.config.js オプション

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

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

ECMAScriptモジュール

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

ECMAScriptモジュールが必要な場合は、`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')