Next.js中获取两个环境变量异常，无法获取token值请求协助

问题根源分析 #

你遇到的domain值重复、token无法获取的问题，主要源于两点：

• 环境变量配置里的单引号、分号会被解析成值的一部分，导致domain出现异常格式；
• Next.js中，客户端组件无法直接访问无前缀NEXT_PUBLIC_的环境变量，这类变量仅能在服务端环境（API路由、服务端组件、getServerSideProps等）中读取。

解决方案步骤 #

1. 修正环境变量配置格式

修改你的.env（或.env.local）文件，去掉单引号和分号，采用标准的KEY=VALUE格式：

STORE_DOMAIN=www.store.com
STORE_ACCESS_TOKEN=123456789

如果需要在客户端组件中访问这两个变量，必须添加NEXT_PUBLIC_前缀：

NEXT_PUBLIC_STORE_DOMAIN=www.store.com
NEXT_PUBLIC_STORE_ACCESS_TOKEN=123456789

2. 重启Next.js开发服务器

修改.env文件后，必须重启你的Next.js开发服务，否则新的环境变量不会生效。

3. 对应场景正确访问变量

• 服务端环境（API路由、服务端组件等）：直接使用原变量名

const domain = process.env.STORE_DOMAIN;
const token = process.env.STORE_ACCESS_TOKEN;

console.log(`domain ${domain} api ${token}`);

• 客户端组件：使用带NEXT_PUBLIC_前缀的变量

const domain = process.env.NEXT_PUBLIC_STORE_DOMAIN;
const token = process.env.NEXT_PUBLIC_STORE_ACCESS_TOKEN;

console.log(`domain ${domain} api ${token}`);

内容的提问来源于stack exchange，提问作者Himanshu Reddy Raud