next.config.js 設定選項

Next.js 可以透過專案根目錄中的 next.config.js 檔案進行設定（例如位於 package.json 旁）。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  /* 在此處填入設定選項 */
}

module.exports = nextConfig

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

本文件列出了所有可用的設定選項：

assetPrefix

basePath

compress

devIndicators

distDir

env

eslint

exportPathMap

generateBuildId

generateEtags

headers

httpAgentOptions

images

onDemandEntries

output

pageExtensions

poweredByHeader

productionBrowserSourceMaps

reactStrictMode

重新導向 (redirects)

rewrites

執行時期設定 (Runtime Config)

trailingSlash

transpilePackages

turbo

typescript

urlImports

webpack

webVitalsAttribution