introduction

为了自定义Next.js 的高级配置,你能够创建next.config.js或者next.config.mjs文件到项目根目录下(package.json旁边)

next.config.js是一个普通的Node.js 模块,不是JSON 文件,它能够被Next.js 服务器以及构建阶段进行使用,它不会包括在任何浏览器构建中 ..

首先查看一下next.config.js示例

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
}
module.exports = nextConfig

如果你需要ECMAScript modules,你需要使用next.config.mjs

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* config options here */
}
export default nextConfig

你也能够使用一个函数 …

module.exports = (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

自从 Next.js 12.1.0开始,你能够使用一个异步函数 ..

module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

phase是被加载的配置的上下文,你能够查看必要的阶段,阶段能够从next/constants中导入 ..

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 */
  }
}

放置在这里的注释行能够放置一些由next.config.js允许的配置,它们由defined in this file ..