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 功能。Webpack 或 Babel 不會解析 next.config.js。

本頁文件記錄了所有可用的設定選項。

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