在Next.js中使用GitHub Actions环境变量时内容消失，问题出在哪？

问题根源 #

你看到的短暂显示后消失，是Next.js的环境变量规则导致的：

• Next.js默认会把不带NEXT_PUBLIC_前缀的环境变量从客户端代码中移除，仅保留在服务端逻辑里。
• 页面加载时先由服务端渲染（SSR）输出变量值，但客户端接管页面hydration时，因为没有这个变量，所以内容被清空。

修复步骤 #

1. 修改GitHub Actions工作流中的变量名，给需要在客户端组件中使用的变量加上NEXT_PUBLIC_前缀：

env:
  NEXT_PUBLIC_ENV_VAR: value

2. 同步更新Next.js代码中的变量引用：

export default function Home() {
  return (
    <div>{process.env.NEXT_PUBLIC_ENV_VAR}</div>
  )
}

额外注意 #

• 如果变量仅在服务端代码（比如API路由、getServerSideProps、getStaticProps等）中使用，不需要加NEXT_PUBLIC_前缀，直接用原变量名即可。
• 确保GHA工作流中的环境变量配置在执行构建命令的Job里，这样构建过程才能正确注入变量，示例如下：

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    env:
      NEXT_PUBLIC_ENV_VAR: value
    steps:
      - uses: actions/checkout@v4
      - run: npm install
      - run: npm run build
      - run: # 你的部署命令

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