NextJS 13部署Azure后服务端组件process.env配置值为undefined

可能的原因及解决步骤 #

• 核对Azure环境变量名称
  登录Azure门户，进入应用服务的「配置」→「应用程序设置」，确认变量名CONFIG_ONE、CONFIG_TWO完全匹配代码中的名称，注意大小写敏感，避免拼写错误。

• 确认Next.js服务端组件的环境变量访问规则
  Next.js 13 App Router的服务端组件可直接访问所有process.env变量，无需添加NEXT_PUBLIC_前缀（该前缀仅针对客户端组件）。但需确保Azure的应用设置没有被错误配置为仅在构建时生效，需设置为「运行时」可用。

• 重启Azure应用服务
  修改Azure环境变量后，需重启应用服务才能让新配置生效，直接在Azure门户的应用服务概览页点击「重启」按钮即可。

• 清理部署缓存
  若部署时使用了缓存的构建产物，可能导致本地.env的内容被带入部署环境。可在Azure部署脚本中添加清除缓存的步骤，或在静态Web Apps的部署配置中禁用构建缓存。

• 检查部署方式的环境变量传递

  • 若使用Azure静态Web Apps部署，确认部署配置中已启用环境变量的注入；
  • 若使用Docker镜像部署，检查Dockerfile是否正确传递了环境变量，或Azure容器应用的配置中是否已添加对应的变量。

示例代码 #

import SampleClientView from '@components/components/client/SampleClientView'; // 带有'use client';

const SamplePage = () => {
  const configOne = process.env.CONFIG_ONE;
  const configTwo = process.env.CONFIG_TWO;

  return (
    <SampleClientView
      configOne={configOne}
      configTwo={configTwo}
    />
  );
};

export default SamplePage;

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