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 = 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 预览版中可用。

如果你在项目中使用 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 解析。

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

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