next.config.js 配置选项

Next.js 可以通过项目目录根目录（例如，通过 package.json）中的 next.config.js 文件进行配置，使用默认导出。

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;

作为函数的配置

你也可以使用一个函数：

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 是当前加载配置的上下文。你可以查看可用的 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 {
    /* 所有 phase（除开发阶段）配置选项 */
  };
};

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 解析。

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