next.config.js 选项
Next.js 可以通过项目根目录（例如和 package.json 同级）下的 next.config.js 文件进行配置，该文件需要包含一个默认导出。
next.config.js
// @ts-check
/** @type {import('next').NextConfig} */
const nextConfig = {
/* 配置选项写在这里 */
}
module.exports = nextConfigECMAScript 模块
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 是配置加载时的当前上下文。你可以查看可用的阶段。这些阶段可以从 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
此功能在 Next.js canary 版本中可用。
如果你在项目中使用 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 解析。
本页面记录了所有可用的配置选项：
appDir
启用 App Router 以使用布局、流式传输等功能。
assetPrefix
了解如何使用 assetPrefix 配置选项来配置你的 CDN。
basePath
使用 `basePath` 将 Next.js 应用部署在域名的子路径下。
cacheLife
了解如何在 Next.js 中设置 cacheLife 配置。
compress
Next.js 提供 gzip 压缩功能，用于压缩渲染内容和静态文件，它仅在使用服务器目标时有效。了解更多相关信息。
crossOrigin
使用 `crossOrigin` 选项在 `next/script` 生成的 `script` 标签上添加 crossOrigin 属性。
cssChunking
使用 `cssChunking` 选项来控制 Next.js 应用中 CSS 文件的分块方式。
devIndicators
优化后的页面包含一个指示器，让你知道它是否正在进行静态优化。你可以在这里选择关闭它。
distDir
设置自定义构建目录，以替代默认的 .next 目录。
dynamicIO
了解如何在 Next.js 中启用 dynamicIO 标志。
env
学习如何在 Next.js 应用程序中添加和访问构建时的环境变量。
eslint
Next.js 默认在构建过程中报告 ESLint 错误和警告。了解如何在此处选择退出此行为。
expireTime
为启用 ISR 的页面自定义 stale-while-revalidate 过期时间。
exportPathMap (已弃用)
使用 `next export` 时自定义将要导出为 HTML 文件的页面。
generateBuildId
配置构建 ID，用于标识当前正在服务的应用程序的构建版本。
generateEtags
Next.js 默认会为每个页面生成 etags。了解如何在此处禁用 etag 生成。
headers
为你的 Next.js 应用添加自定义 HTTP headers。
httpAgentOptions
Next.js 默认会自动使用 HTTP Keep-Alive。了解如何在此处禁用 HTTP Keep-Alive。
images
next/image 加载器的自定义配置
自定义 Next.js 缓存处理器
配置 Next.js 缓存以使用 Redis、Memcached 或其他外部服务来存储和重新验证数据。
logging
配置在开发模式下运行 Next.js 时如何将数据获取记录到控制台。
mdxRs
在 App 路由中使用新的 Rust 编译器来编译 MDX 文件。
onDemandEntries
配置 Next.js 在开发环境中如何处理和保持页面在内存中。
optimizePackageImports
optimizePackageImports Next.js 配置选项的 API 参考
output
Next.js 自动追踪每个页面所需的文件，以便轻松部署应用。在此了解其工作原理。
pageExtensions
扩展 Next.js 在解析页面路由器中的页面时使用的默认页面扩展名。
poweredByHeader
Next.js 默认会添加 `x-powered-by` 头。在此了解如何选择退出。
ppr
了解如何在 Next.js 中启用部分预渲染。
productionBrowserSourceMaps
在生产构建期间启用浏览器源映射生成。
reactCompiler
启用 React 编译器来自动优化组件渲染。
reactMaxHeadersLength
React 发出并添加到响应中的 headers 的最大长度。
reactStrictMode
Next.js 运行时现已完全兼容严格模式，了解如何启用
重定向（Redirects）
在你的 Next.js 应用中添加重定向。
重写
在你的 Next.js 应用中添加重写。
sassOptions
配置 Sass 选项。
serverActions
配置 Next.js 应用程序中的 Server Actions 行为。
serverComponentsHmrCache
配置在服务器组件中是否在 HMR 刷新请求之间缓存 fetch 响应。
serverExternalPackages
将特定依赖从服务器组件打包中排除，使用原生 Node.js `require`。
staleTimes
了解如何覆盖客户端路由缓存的失效时间。
staticGeneration*
了解如何在 Next.js 应用中配置静态生成。
trailingSlash
配置 Next.js 页面以带或不带尾部斜杠进行解析。
transpilePackages
自动转译和打包来自本地包（如 monorepos）或外部依赖（`node_modules`）的依赖项。
turbo
配置 Next.js 的 Turbopack 特定选项
typedRoutes
启用静态类型链接的实验性支持。
typescript
Next.js 默认会报告 TypeScript 错误。在这里了解如何选择退出此行为。
urlImports
配置 Next.js 以允许从外部 URL 导入模块。
useLightningcss
启用 Lightning CSS 的实验性支持。
webVitalsAttribution
了解如何使用 webVitalsAttribution 选项来确定 Web Vitals 问题的来源。
自定义 Webpack 配置
了解如何自定义 Next.js 使用的 webpack 配置