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

图片配置

onDemandEntries

output

pageExtensions

poweredByHeader

productionBrowserSourceMaps

reactStrictMode

重定向

rewrites

运行时配置

trailingSlash

transpilePackages

turbo

TypeScript

urlImports

webpack

webVitalsAttribution