Next.js中环境变量与常量文件的选择：标准实践是什么？

首先明确核心结论：Constants.js 会被打包到前端代码中，任何人都能通过浏览器开发者工具查看；而 Next.js 的服务端环境变量不会暴露给客户端，是存储敏感信息的正确方式。

1. Constants.js 的风险（绝对不能放敏感信息） #

你目前写的constants.js里如果包含TOP_SECRET_API_KEY，只要在前端组件中导入这个文件，整个文件的内容都会被编译到客户端的 JavaScript 包中。用户只需要打开浏览器的「开发者工具 - 源代码」，就能直接看到你的密钥，完全没有安全性可言。

只有公开的、不需要保密的常量（比如网站名称、公开 URL）适合放在 Constants.js 里，敏感信息绝对不能碰这个文件。

正确的 Constants.js 示例：

// constants.js（仅存公开常量）
export const WEBSITE_NAME = 'MyWebsite.com';
export const WEBSITE_URL = 'https://www.mywebsite.com';

2. Next.js 环境变量的正确用法 #

Next.js 的环境变量分两种类型，对应不同的使用场景：

（1）服务端专用环境变量（存储敏感信息）

默认情况下，.env.production（或.env.development）里的变量，只有在服务端代码中能访问：

• API 路由（pages/api/或app/api/下的文件）
• getServerSideProps、getStaticProps（Pages Router）
• Server Components（App Router）

这些代码不会被发送到客户端，所以你的TOP_SECRET_API_KEY放在这里是安全的，不会被用户获取。

示例：

# .env.production
WEBSITE_NAME = MyWebsite.com
WEBSITE_URL = https://www.mywebsite.com
TOP_SECRET_API_KEY = 1234abcd

在服务端代码中使用：

// pages/api/hello.js（API路由，服务端运行）
export default function handler(req, res) {
  const secretKey = process.env.TOP_SECRET_API_KEY;
  // 这里用密钥调用第三方API，完全安全
  res.status(200).json({ name: 'John Doe' });
}

（2）客户端可用环境变量（公开常量）

如果需要在客户端组件中使用某个常量（比如网站名称），可以给变量加上NEXT_PUBLIC_前缀，这样 Next.js 会把它打包到客户端代码中（注意：这些是公开的，不能放敏感信息）。

示例：

# .env.production
NEXT_PUBLIC_WEBSITE_NAME = MyWebsite.com
NEXT_PUBLIC_WEBSITE_URL = https://www.mywebsite.com
TOP_SECRET_API_KEY = 1234abcd

在客户端组件中使用：

// components/Header.js（客户端组件）
export default function Header() {
  return <h1>{process.env.NEXT_PUBLIC_WEBSITE_NAME}</h1>;
}

3. 标准实践总结 #

• 敏感信息（API 密钥、私钥等）：必须用无 NEXT_PUBLIC_ 前缀的环境变量，且仅在服务端代码中使用，绝对不能放在 Constants.js 或客户端可访问的变量里。
• 公开常量：两种方式都可以选：
  • 如果是固定不变的公开值，用 Constants.js 管理更直观；
  • 如果需要根据环境（开发/生产）切换值，用带NEXT_PUBLIC_前缀的环境变量更灵活。

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