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 是一個標準的 Node.js 模組，而非 JSON 檔案。它會被 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 解析。

本頁面記載了所有可用的設定選項：

appDir

assetPrefix

basePath

compress

crossOrigin

devIndicators

distDir

env

eslint

exportPathMap

generateBuildId

generateEtags

headers

httpAgentOptions

圖片設定

cacheHandler

instrumentationHook

日誌記錄 (logging)

mdxRs

onDemandEntries

optimizePackageImports

output

pageExtensions

部分預渲染 (Partial Prerendering) (實驗性功能)

poweredByHeader

productionBrowserSourceMaps

reactStrictMode

重新導向

rewrites

serverActions

serverComponentsExternalPackages

StaleTimes (實驗性功能)

trailingSlash

transpilePackages

turbo

typedRoutes

TypeScript

urlImports

webpack

webVitalsAttribution