NextJS 14公共环境变量在Elastic Beanstalk中无法识别求助

问题根源 #

Next.js的NEXT_PUBLIC_前缀环境变量需要在构建阶段被嵌入到客户端代码中，而Elastic Beanstalk默认的环境变量是在运行时才生效的。如果直接部署本地预构建的代码，或者EB没有在构建阶段传递这些变量，客户端就会读取到undefined。

解决方案（无需本地.env文件） #

你完全不需要在项目中编写.env文件，只需确保EB在构建阶段将NEXT_PUBLIC_变量注入Next.js的构建流程即可，以下是两种可靠方式：

方法一：使用EB扩展配置文件 #

在项目根目录创建.ebextensions/00_build_env.config文件，写入以下内容：

commands:
  01_export_public_vars:
    command: |
      # 将所有NEXT_PUBLIC_开头的环境变量写入临时.env.production
      env | grep NEXT_PUBLIC_ >> .env.production
  02_build_app:
    command: npm run build

这个配置会在EB构建你的项目前，把所有NEXT_PUBLIC_前缀的环境变量导出到.env.production，让Next.js在构建时读取并嵌入到客户端代码。

方法二：使用EB平台构建钩子（官方推荐） #

1. 创建目录结构：.platform/hooks/prebuild/
2. 在该目录下创建00_set_public_vars.sh文件，赋予执行权限（本地执行chmod +x .platform/hooks/prebuild/00_set_public_vars.sh）
3. 文件内容：

#!/bin/bash
# 导出所有NEXT_PUBLIC_前缀的环境变量到构建用的.env.production
env | grep NEXT_PUBLIC_ >> .env.production

这种钩子是EB官方提供的构建前触发机制，比.ebextensions的命令执行时机更准确，能确保变量在Next.js构建前被正确注入。

额外验证步骤 #

1. 确认客户端代码引用正确：在use client标记的组件中，必须直接通过process.env.NEXT_PUBLIC_XXX引用，比如：

const targetUrl = `${process.env.NEXT_PUBLIC_API_BASE_URL}/user/profile`;

2. 部署源码而非预构建产物：不要把本地构建好的.next文件夹上传到EB，必须上传项目源码，让EB在服务器端完成构建。
3. 查看EB构建日志：部署后检查EB的构建日志，确认NEXT_PUBLIC_变量已被写入.env.production，且Next.js构建过程中没有报错。

内容的提问来源于stack exchange，提问作者dc-mpo