next.config.js オプション

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

next.config.js

// @ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  /* ここに設定オプションを記述 */
}

module.exports = nextConfig

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

ECMAScriptモジュールが必要な場合は、next.config.mjsを使用できます:

next.config.mjs

// @ts-check

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* ここに設定オプションを記述 */
}

export default nextConfig

関数を使用することも可能です:

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からインポート可能です:

// @ts-check

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* 開発環境専用の設定オプションをここに記述 */
    }
  }

  return {
    /* 開発環境以外の全フェーズ向け設定オプションをここに記述 */
  }
}

コメント行はnext.config.jsで許可される設定を記述する場所で、このファイルで定義されています。

ただし、どの設定も必須ではなく、各設定の機能を理解する必要はありません。代わりに、このセクションで有効化または変更したい機能を検索すると、必要な手順が表示されます。

ターゲットのNode.jsバージョンで利用できない新しいJavaScript機能は使用しないでください。next.config.jsはWebpack、Babel、TypeScriptによってパースされません。

このページでは利用可能なすべての設定オプションを解説しています:

next.config.js オプション

assetPrefix

basePath

圧縮 (compress)

crossOrigin

devIndicators

distDir

環境変数 (env)

ESLint

exportPathMap

generateBuildId

generateEtags

ヘッダー

httpAgentOptions

画像 (images)

instrumentationHook

onDemandEntries

optimizePackageImports

output

pageExtensions

poweredByHeader

productionBrowserSourceMaps

reactStrictMode

リダイレクト

リライト (rewrites)

ランタイム設定

trailingSlash

transpilePackages

turbo

TypeScript

urlImports

webpack

webVitalsAttribution