next.config.js のオプション

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

next.config.js

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

ECMAScriptモジュール

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

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

next.config.mjs

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

知っておくと良いこと: .cjs、.cts、または.mts拡張子のnext.configは、現在サポートされていません。

関数としての設定

関数を使用することもできます

next.config.mjs

// @ts-check
 
export default (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

非同期設定

Next.js 12.1.0以降、非同期関数を使用できます

next.config.js

// @ts-check
 
module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  }
  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 {
      /* development only config options here */
    }
  }
 
  return {
    /* config options for all phases except development here */
  }
}

TypeScript

この機能は、Next.js canaryから利用できます。

プロジェクトでTypeScriptを使用している場合は、next.config.tsを使用して、設定で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.config.js のオプション

ECMAScriptモジュール

関数としての設定

非同期設定

フェーズ

TypeScript

appDir

assetPrefix

basePath

compress

crossOrigin

cssChunking

devIndicators

distDir

env

eslint

expireTime

exportPathMap

generateBuildId

generateEtags

headers

httpAgentOptions

images

cacheHandler

logging

mdxRs

onDemandEntries

optimizePackageImports

output

pageExtensions

poweredByHeader

ppr

productionBrowserSourceMaps

reactCompiler

reactMaxHeadersLength

reactStrictMode

redirects

rewrites

sassOptions

serverActions

serverComponentsHmrCache

serverExternalPackages

staleTimes

staticGeneration*

trailingSlash

transpilePackages

turbo

typedRoutes

typescript

urlImports

useLightningcss

webpack

webVitalsAttribution