Next.js开启"type": "module"时如何配置浏览器环境变量？

1. 修正next.config.js的ES模块写法 #

因为你的package.json设置了"type": "module"，next.config.js必须使用ES模块导出语法，不能用module.exports：

// next.config.js
export default {
  // 若需通过配置文件定义环境变量，可保留env字段
  env: {
    NEXT_PUBLIC_CLIENT_VAR: "浏览器端可访问变量",
    SERVER_ONLY_VAR: "仅服务端可访问变量"
  }
}

注意：Next.js 9.4+官方推荐直接使用NEXT_PUBLIC_前缀的.env变量，而非next.config.js的env字段，后者仅作为兼容方案存在。

2. 确保.env文件配置正确并生效 #

• 变量必须以NEXT_PUBLIC_开头才能被注入浏览器环境，例如：

  # .env.local
  NEXT_PUBLIC_API_BASE_URL=https://your-api-domain.com
  

• 修改.env文件或next.config.js后必须重启开发服务器（停止npm run dev再重新启动），否则配置不会加载。
• 检查文件名：开发环境优先加载.env.local，其次是.env.development，生产环境加载.env.production，不要写错文件名或放错位置。

3. 浏览器端正确访问环境变量 #

不要直接打印整个process.env对象（Next.js不会暴露完整的process对象到浏览器），直接访问具体的变量：

// 浏览器端组件中
console.log(process.env.NEXT_PUBLIC_API_BASE_URL); // 正确输出变量值

未带NEXT_PUBLIC_前缀的变量仅能在服务端代码（如API路由、服务端组件）中访问，浏览器端无法读取。

4. 服务端读取next.config.js配置的正确方式 #

服务端代码无法直接通过process.env读取next.config.js中的配置，需使用next/config工具获取：

// 服务端组件或API路由中
import getConfig from 'next/config';

const { publicRuntimeConfig, serverRuntimeConfig } = getConfig();

// 访问next.config.js的env字段中的变量
console.log(publicRuntimeConfig.NEXT_PUBLIC_CLIENT_VAR); // 浏览器端也可访问的变量
console.log(serverRuntimeConfig.SERVER_ONLY_VAR); // 仅服务端可访问的变量

5. 额外排查点 #

• 若你的Next.js版本低于12，不支持ES模块的next.config.js，可将配置文件重命名为next.config.cjs，使用CommonJS语法（module.exports），避免与package.json的type: module冲突。
• 检查.gitignore是否忽略了.env.local，若忽略会导致部署时无法加载该文件的变量。
• 避免多个.env文件变量冲突，.env.local优先级高于其他.env文件，同名变量会覆盖。

内容的提问来源于stack exchange，提问作者Iván