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

assetPrefix

basePath

bundlePagesRouterDependencies

compress

crossOrigin

devIndicators

distDir

env

eslint

exportPathMap

generateBuildId

generateEtags

headers

httpAgentOptions

images

onDemandEntries

optimizePackageImports

output

pageExtensions

poweredByHeader

productionBrowserSourceMaps

reactStrictMode

redirects

rewrites

Runtime Config

serverExternalPackages

trailingSlash

transpilePackages

turbo

typescript

urlImports

useLightningcss

webpack

webVitalsAttribution