Menu

next.config.js 配置选项

Next.js 可以通过项目目录根目录中的 next.config.js 文件进行配置(例如,与 package.json 同级),并使用默认导出。

next.config.js
// @ts-check
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  /* 在这里配置选项 */
}
 
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 = {
  /* 在这里配置选项 */
}
 
export default nextConfig

值得注意的是:目前支持使用 .cjs.cts.mts 扩展名的 next.config 文件。

配置作为函数

你也可以使用函数:

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

phase 是加载配置时的当前上下文。你可以查看可用的 phases。Phases 可以从 next/constants 导入:

next.config.js
// @ts-check
 
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
 
module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* 仅开发环境的配置选项 */
    }
  }
 
  return {
    /* 除开发环境外所有阶段的配置选项 */
  }
}

TypeScript

如果你在项目中使用 TypeScript,可以使用 next.config.ts 在配置中使用 TypeScript:

next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  /* 在这里配置选项 */
}
 
export default nextConfig

注释行是你可以放置 next.config.js 允许的配置的地方,这些配置定义在此文件中

然而,所有配置都不是必需的,也没有必要理解每个配置的作用。相反,在本节中搜索你需要启用或修改的功能,它们会告诉你该怎么做。

避免使用目标 Node.js 版本中不可用的新 JavaScript 特性。next.config.js 不会被 Webpack 或 Babel 解析。

本页面记录了所有可用的配置选项:

单元测试(实验性)

从 Next.js 15.1 开始,next/experimental/testing/server 包包含了帮助对 next.config.js 文件进行单元测试的实用工具。

unstable_getResponseFromNextConfig 函数使用提供的请求信息运行 next.config.js 中的 headersredirectsrewrites 函数,并返回包含路由结果的 NextResponse

来自 unstable_getResponseFromNextConfig 的响应仅考虑 next.config.js 字段,不考虑代理或文件系统路由,因此生产环境中的结果可能与单元测试不同。

import {
  getRedirectUrl,
  unstable_getResponseFromNextConfig,
} from 'next/experimental/testing/server'
 
const response = await unstable_getResponseFromNextConfig({
  url: 'https://nextjs.org/test',
  nextConfig: {
    async redirects() {
      return [{ source: '/test', destination: '/test2', permanent: false }]
    },
  },
})
expect(response.status).toEqual(307)
expect(getRedirectUrl(response)).toEqual('https://nextjs.org/test2')

experimental.adapterPath

配置一个自定义适配器,让 Next.js 通过 modifyConfig 和 buildComplete 回调函数接入构建过程。

allowedDevOrigins

使用 `allowedDevOrigins` 来配置可以请求开发服务器的其他源。

资源前缀

了解如何使用 assetPrefix 配置选项来配置你的 CDN。

基本路径

使用 `basePath` 在域的子路径下部署 Next.js 应用程序。

bundlePagesRouterDependencies

为页面路由器启用自动依赖打包

压缩

Next.js 提供 gzip 压缩来压缩渲染的内容和静态文件,它仅在服务器目标下有效。在此处了解更多详情。

crossOrigin

使用 `crossOrigin` 选项为 `next/script` 和 `next/head` 生成的 `script` 标签添加 crossOrigin 标签。

devIndicators

优化的页面包含一个指示器,让你知道它是否正在进行静态优化。你可以在此处选择退出。

distDir

设置自定义构建目录,以替代默认的 .next 目录。

env

了解如何在构建时在你的 Next.js 应用程序中添加和访问环境变量。

exportPathMap

使用 `next export` 时自定义将导出为 HTML 文件的页面。

generateBuildId

配置构建 ID,用于标识当前正在提供的应用程序的构建版本。

generateEtags

Next.js 默认为每个页面生成 etag。在此了解如何禁用 etag 生成。

标头

为你的 Next.js 应用添加自定义 HTTP 标头。

httpAgentOptions

Next.js 默认会自动使用 HTTP 保持连接。在此了解如何禁用 HTTP 保持连接。

图像

next/image 加载器的自定义配置

isolatedDevBuild

为开发构建使用隔离目录以防止与生产构建冲突。

onDemandEntries

配置 Next.js 在开发环境中如何处置和保留内存中的页面。

optimizePackageImports

Next.js 配置选项 optimizePackageImports 的 API 参考

输出

Next.js 自动跟踪每个页面所需的文件,以便轻松部署你的应用程序。在此了解其工作原理。

pageExtensions

在页面路由器中解析页面时,扩展 Next.js 使用的默认页面扩展名。

poweredByHeader

Next.js 默认会添加 `x-powered-by` 头部。在此了解如何选择退出。

productionBrowserSourceMaps

在生产构建期间启用浏览器源代码映射生成。

experimental.proxyClientMaxBodySize

配置使用代理时的最大请求体大小。

reactStrictMode

现在完整的 Next.js 运行时已经符合严格模式,了解如何选择加入

重定向

为你的 Next.js 应用添加重定向。

重写规则

为你的 Next.js 应用添加重写规则。

serverExternalPackages

从 `bundlePagesRouterDependencies` 启用的依赖打包中排除特定依赖。

尾部斜杠

配置 Next.js 页面是否以斜杠结尾。

transpilePackages

自动转译和打包来自本地包(如单一仓库)或外部依赖(`node_modules`)的依赖。

turbopack

使用 Turbopack 特定选项配置 Next.js

TypeScript

默认情况下,Next.js 会报告 TypeScript 错误。在此处了解如何选择退出此行为。

urlImports

配置 Next.js 以允许从外部 URL 导入模块。

useLightningcss

启用 Lightning CSS 的实验性支持。

webVitalsAttribution

了解如何使用 webVitalsAttribution 选项来定位 Web Vitals 问题的源头。

webpack

了解如何自定义 Next.js 使用的 webpack 配置