next.config.js 选项
Next.js 可以通过项目根目录下的 next.config.js 文件（例如，通过 package.json）进行配置，并使用默认导出。
next.config.js
// @ts-check
/** @type {import('next').NextConfig} */
const nextConfig = {
/* config options here */
}
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 = {
/* 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 解析。
此页面记录了所有可用的配置选项
assetPrefix
了解如何使用 assetPrefix 配置选项来配置您的 CDN。
basePath
使用 `basePath` 将 Next.js 应用程序部署到域名的子路径下。
bundlePagesRouterDependencies
为 Pages Router 启用自动依赖项捆绑
compress
Next.js 提供 gzip 压缩来压缩渲染内容和静态文件，它仅适用于服务器目标。在此处了解更多信息。
crossOrigin
使用 `crossOrigin` 选项在 `next/script` 和 `next/head` 生成的 `script` 标签上添加 crossOrigin 标签。
devIndicators
已优化的页面包含一个指示器，用于告知您它是否正在进行静态优化。您可以在此处选择退出。
distDir
设置一个自定义构建目录以代替默认的 .next 目录。
env
了解如何在构建时在您的 Next.js 应用程序中添加和访问环境变量。
eslint
默认情况下，Next.js 在构建期间报告 ESLint 错误和警告。了解如何在此处选择退出此行为。
exportPathMap
使用 `next export` 时，自定义将导出为 HTML 文件的页面。
generateBuildId
配置构建 ID，该 ID 用于标识正在为您应用程序提供服务的当前构建。
generateEtags
默认情况下，Next.js 将为每个页面生成 etags。了解如何在此处禁用 etag 生成。
headers
向您的 Next.js 应用程序添加自定义 HTTP 标头。
httpAgentOptions
默认情况下，Next.js 会自动使用 HTTP Keep-Alive。了解如何在此处禁用 HTTP Keep-Alive。
images
next/image 加载器的自定义配置
onDemandEntries
配置 Next.js 如何处理和保留开发中创建的页面。
optimizePackageImports
Next.js 配置选项 optimizePackageImports 的 API 参考
output
Next.js 自动跟踪每个页面需要哪些文件，以便轻松部署您的应用程序。了解它是如何工作的。
pageExtensions
扩展 Pages Router 在解析页面时使用的默认页面扩展名。
poweredByHeader
Next.js 默认情况下会添加 `x-powered-by` 标头。了解如何在此处选择退出。
productionBrowserSourceMaps
在生产构建期间启用浏览器源映射生成。
reactStrictMode
完整的 Next.js 运行时现在与严格模式兼容，了解如何选择加入
redirects
向您的 Next.js 应用程序添加重定向。
rewrites
向您的 Next.js 应用程序添加重写。
运行时配置
向您的 Next.js 应用程序添加客户端和服务器运行时配置。
serverExternalPackages
从 `bundlePagesRouterDependencies` 启用的依赖项捆绑中选择退出特定依赖项。
trailingSlash
配置 Next.js 页面以使用或不使用尾部斜杠进行解析。
transpilePackages
自动转译和捆绑来自本地包（如 monorepos）或来自外部依赖项 (`node_modules`) 的依赖项。
turbo
使用 Turbopack 特定选项配置 Next.js
typescript
默认情况下，Next.js 报告 TypeScript 错误。了解如何在此处选择退出此行为。
urlImports
配置 Next.js 以允许从外部 URL 导入模块。
useLightningcss
启用对 Lightning CSS 的实验性支持。
webpack
了解如何自定义 Next.js 使用的 webpack 配置
webVitalsAttribution
了解如何使用 webVitalsAttribution 选项来精确定位 Web Vitals 问题的根源。
这有帮助吗？