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

補足: .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

この機能は Next.js カナリー版から利用可能です。

プロジェクトで 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 によって解析されません。

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

next.config.js のオプション

ECMAScript モジュール

関数としての設定

非同期設定

フェーズ

TypeScript

assetPrefix

basePath

bundlePagesRouterDependencies

compress

crossOrigin

devIndicators

distDir

env

eslint

exportPathMap

generateBuildId

generateEtags

headers

httpAgentOptions

images

onDemandEntries

optimizePackageImports

output

pageExtensions

poweredByHeader

productionBrowserSourceMaps

reactStrictMode

リダイレクト

リライト

ランタイム設定

serverExternalPackages

trailingSlash

transpilePackages

turbo

typescript

urlImports

useLightningcss

webVitalsAttribution

webpack