Next.js应用部署至Azure后无法读取应用设置中的环境变量

Next.js完全支持读取Azure应用设置中的环境变量，但要适配「一次构建、多处部署」的需求，需要调整变量的读取方式——因为默认的NEXT_PUBLIC_*前缀变量是构建时注入的，无法在运行时动态读取Azure的应用设置。以下是具体实现方案：

1. 服务器端直接读取（API路由、getServerSideProps等） #

服务器端代码（比如API路由、页面的getServerSideProps、Server Component）可以直接通过process.env.变量名读取Azure应用设置中的变量，不需要NEXT_PUBLIC_前缀：

• 在Azure应用设置中添加变量（比如AZURE_ENV=production）
• 服务器端代码示例：

  // pages/api/env.js（Pages Router）
  export default function handler(req, res) {
    res.status(200).json({ env: process.env.AZURE_ENV });
  }
  

  部署后，服务器端会自动读取Azure注入的环境变量，无需额外配置。

2. 客户端运行时读取（适配一次构建多处部署） #

客户端代码是静态构建的，无法直接读取运行时环境变量，需要通过服务器端接口转发：

方案一：Pages Router用publicRuntimeConfig #

• 移除next.config.js中的env配置（那是构建时注入的，会和运行时读取冲突）
• 修改next.config.js添加运行时配置：

  module.exports = {
    publicRuntimeConfig: {
      azureEnv: process.env.AZURE_ENV // 服务器端运行时从Azure读取
    }
  };
  

• 客户端代码中获取：

  import getConfig from 'next/config';
  const { publicRuntimeConfig } = getConfig();
  
  console.log(publicRuntimeConfig.azureEnv); // 运行时从服务器端获取
  

方案二：App Router（Next.js 13+）用Route Handler #

• 创建一个Route Handler（比如app/api/env/route.js）：

  export async function GET() {
    return Response.json({
      azureEnv: process.env.AZURE_ENV
    });
  }
  

• 客户端组件中调用该API获取变量：

  async function getEnv() {
    const res = await fetch('/api/env');
    const data = await res.json();
    console.log(data.azureEnv);
  }
  

3. Azure部署关键注意事项 #

• 不要给Azure应用设置中的变量加NEXT_PUBLIC_前缀，避免构建时提前注入，失去运行时动态读取的能力。
• 确保Azure应用服务的启动命令是next start，而非静态文件服务（比如serve静态导出的文件）——静态导出的产物无法运行时读取环境变量，必须用Node.js运行Next.js服务器。
• 本地测试时，用next start启动服务（不要用next dev），并通过.env.local添加变量，模拟Azure的运行时环境。

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