如何让Next.js读取环境文件？端口配置不生效求助

1. 确认.env文件的位置与命名规范 #

• 必须将.env文件放在项目根目录（与package.json同级），不能放在src或其他子目录下。
• 开发环境优先使用.env.local或.env.development，Next.js会优先加载环境特定的配置文件，避免和生产环境配置冲突。

2. 适配Next.js版本调整启动命令 #

• Next.js 13+（App Router）：默认不会自动读取.env中的PORT变量，需手动在启动命令中引用环境变量：

  "scripts": {
    "dev": "PORT=$PORT next dev"
  }
  

  Windows系统替换为：

  "scripts": {
    "dev": "set PORT=%PORT% && next dev"
  }
  

• Next.js 12及以下：若仍不生效，检查启动脚本是否存在硬编码端口，或系统环境变量是否优先级更高。

3. 通过next.config.js手动配置端口 #

• 创建next.config.js，手动读取环境变量并指定端口：

  module.exports = {
    async serverRuntimeConfig() {
      return {
        port: process.env.PORT || 3000
      }
    }
  }
  

  同时修改启动命令显式指定端口：

  "scripts": {
    "dev": "next dev -p $PORT"
  }
  

4. 排查系统环境变量冲突 #

• 在终端执行echo $PORT（Linux/macOS）或echo %PORT%（Windows），查看当前系统级PORT变量值。如果系统全局PORT已被设置，Next.js会优先读取该值，而非项目.env文件中的配置。

5. 验证环境变量是否正确加载 #

• 在项目中添加测试页面，确认PORT变量是否被读取：

  // pages/debug.js
  export default function Debug() {
    return <div>当前PORT: {process.env.PORT}</div>
  }
  

  若页面显示undefined，说明.env文件未被正确加载，检查文件是否拼写错误（比如误写为.env.dev而非.env.development），或是否被.gitignore规则排除。

内容的提问来源于stack exchange，提问作者user21978638