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

Good to know: 拡張子が .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 を使用している場合は、設定に 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 によってパースされません。

このページでは、利用可能なすべての設定オプションを文書化しています：