求助：Next.js环境变量在Azure App Service中显示为undefined

你的核心问题是GitHub Actions工作流的步骤顺序错误，导致Next.js在构建时没有读取到环境变量。

Next.js中，带NEXT_PUBLIC_前缀的环境变量是在构建阶段（npm run build）就被静态编译进客户端代码的，而你当前的工作流是先执行npm run build，再生成.env.production文件——这时候变量根本没参与构建过程，自然在运行时无法获取。

修复步骤 #

1. 调整工作流步骤顺序 #

把生成.env.production的步骤移到npm install, build, and test之前，确保构建时能读取到环境变量：

name: Build and deploy x platofrm - UAT

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '18.x'

      # 提前生成.env.production，确保build时能读取到
      - name: Set Environment Variables
        run: |
          echo "NEXT_PUBLIC_API_URL=${{ vars.NEXT_PUBLIC_API_URL }}" > .env.production
          echo "NEXT_PUBLIC_PYTHON_API_URL=${{ vars.NEXT_PUBLIC_PYTHON_API_URL }}" >> .env.production
          echo "NEXTAUTH_SECRET=${{ secrets.NEXTAUTH_SECRET }}" >> .env.production

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Zip artifact for deployment
        run: zip -r release.zip .
      
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v2
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v2
        with:
          name: node-app
          
      - name: Unzip artifact for deployment
        run: unzip -o release.zip

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'x-platform-uat'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_DFE186FC1DA249E4A244CC61460052A6 }}
          package: release.zip

2. 移除不必要的dotenv依赖 #

Next.js会自动加载项目根目录下的.env、.env.production等环境变量文件，不需要手动安装dotenv包，也不需要在next.config.js中添加require('dotenv').config()。

3. 额外注意事项 #

• 敏感变量不要打包到客户端：NEXTAUTH_SECRET是服务器端敏感变量，不需要带NEXT_PUBLIC_前缀，也不需要编译到客户端代码。你可以直接在Azure Web App的「应用设置」中配置这个变量，Next.js在服务器运行时会自动读取。
• 验证变量是否正确注入：可以在build步骤前添加打印命令，确认.env.production内容正确：

  cat .env.production
  

• 检查GitHub Vars/Secrets拼写：确保仓库的Variables和Secrets中，变量名和你使用的完全一致，没有大小写或拼写错误。

内容的提问来源于stack exchange，提问作者Abdush Samad Miah