React嵌套文件结构中.env配置及Stripe密钥使用问题

1. 遵守环境变量命名规则 #

React生态主流框架（Create React App、Next.js等）对客户端可访问的环境变量有强制命名要求：

• Create React App：必须以 REACT_APP_ 开头，比如 REACT_APP_STRIPE_PUBLISHABLE_KEY
• Next.js：客户端组件中使用的变量必须以 NEXT_PUBLIC_ 开头，服务器组件无需前缀（但服务器组件的变量不会暴露给浏览器）

你之前用的 MY_KEY 不符合前缀规则，框架会自动忽略这类变量，导致无法通过 process.env 访问。

2. 确认.env文件位置 #

确保 .env 文件放在项目根目录（和 package.json 同级），不要放在 pages 或其他子文件夹下。文件内容格式如下：

# .env 根目录下
REACT_APP_STRIPE_PUBLISHABLE_KEY=pk_test_xxxxxxx # Create React App 用此前缀
# 或者 Next.js 客户端组件用：
# NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxxxxx

3. 重启开发服务器 #

修改 .env 文件后，必须重启本地开发服务器（比如停止 npm start 或 next dev 后重新启动）。环境变量是在项目启动时加载的，不重启的话新变量不会生效。

4. 组件中正确调用变量 #

在 pages/Stripe.js 中，直接使用带前缀的变量名：

// pages/Stripe.js
import { loadStripe } from '@stripe/stripe-js';

// Create React App 示例
const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);

// Next.js 客户端组件示例
// const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);

function StripeComponent() {
  // 组件逻辑
  return <div>...</div>;
}

export default StripeComponent;

关键安全提醒 #

Stripe的密钥分两种：

• Publishable Key（pk_test_开头）：可以安全暴露在客户端代码中，用于初始化Stripe.js
• Secret Key（sk_test_开头）：绝对不能放在客户端或客户端可访问的 .env 变量中，必须只在服务器端代码中使用，用于处理支付验证等敏感操作

如果你的密钥是Secret Key，绝不能尝试在客户端组件中调用，必须移到服务器端接口（比如Next.js的API路由、Express后端）中使用。

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