next.config.js オプション

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

next.config.js

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

module.exports = nextConfig

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

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

next.config.mjs

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

export default nextConfig

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

next.config.mjs

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

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

next.config.js

module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* ここに設定オプションを記述 */
  }
  return nextConfig
}

phaseは設定が読み込まれる現在のコンテキストです。利用可能なフェーズを参照できます。フェーズはnext/constantsからインポート可能です:

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 オプション

appDir

assetPrefix

basePath

圧縮 (compress)

devIndicators

distDir

環境変数

ESLint

exportPathMap

generateBuildId

generateEtags

ヘッダー

httpAgentOptions

画像

incrementalCacheHandlerPath

mdxRs

onDemandEntries

optimizePackageImports

output

pageExtensions

poweredByHeader

productionBrowserSourceMaps

reactStrictMode

リダイレクト

リライト

serverComponentsExternalPackages

trailingSlash

transpilePackages

turbo

typedRoutes

TypeScript

URLインポート

webpack

webVitalsAttribution