Next.js 13 应用路由中 Stripe 数据获取的深度解析与实践

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = pk_test_apikeycontinues
STRIPE_SECRET_KEY = sk_test_apikeycontinues

// ./app/utils/stripe.js
import Stripe from 'stripe';

// 确保在服务器端执行，否则 process.env.STRIPE_SECRET_KEY 将是 undefined
// 如果此文件被客户端组件导入，Stripe 实例将无法正确初始化
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  apiVersion: '2023-10-16', // 建议指定API版本
});

// ./app/page.js (这是一个服务器组件，因为没有 'use client' 指令)
import { stripe } from "./utils/stripe"; // 确保此导入仅在服务器端使用
import ProductCard from './components/ProductCard'; // 假设 ProductCard 是一个客户端组件

export default async function HomePage() {
  const inventory = await stripe.products.list({
    limit: 5,
  });

  const products = inventory.data; // 获取实际的产品数据

  return (
    <div>
      <h1>我们的产品</h1>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '20px' }}>
        {products.map((product) => (
          // 如果 ProductCard 是客户端组件，数据作为 props 传递
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

// components/ProductCard.js (如果需要交互性，则为客户端组件)
// 'use client';
// import React from 'react';
// export default function ProductCard({ product }) {
//   return (
//     <div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '8px' }}>
//       <h3>{product.name}</h3>
//       <p>{product.description}</p>
//       {/* ... 更多产品详情和交互按钮 */}
//     </div>
//   );
// }

// utils/queryClient.ts (可以在任何地方定义，但通常放在 utils 文件夹)
// 这是一个通用的 Promise 缓存函数，用于防止重复的数据请求
const fetchMap = new Map<string, Promise<any>>();

function queryClient<QueryResult>(
  name: string,
  query: () => Promise<QueryResult>
): Promise<QueryResult> {
  if (!fetchMap.has(name)) {
    fetchMap.set(name, query());
  }
  return fetchMap.get(name)!;
}

export { queryClient };

// ./app/home-client.js (一个客户端组件)
'use client'

import { use } from 'react';
import { queryClient } from './utils/queryClient'; // 导入自定义的 queryClient

// 假设你有一个 Next.js API 路由来处理 Stripe 请求，例如 /api/products
// 这个 API 路由会在服务器端使用 STRIPE_SECRET_KEY 调用 Stripe API
async function fetchProductsFromApi() {
  const response = await fetch('/api/products', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
    // body: JSON.stringify({ slug }), // 如果需要传递参数
  });
  if (!response.ok) {
    throw new Error('Failed to fetch products');
  }
  return response.json();
}

export default function HomeClient() {
  // 使用 queryClient 缓存 fetchProductsFromApi 的 Promise
  // "stripe-products-list" 是一个唯一的键，用于缓存此特定请求
  const { products } = use(
    queryClient("stripe-products-list", fetchProductsFromApi)
  );

  console.log("Products in client component:", products);

  if (!products) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h2>客户端组件中的产品列表</h2>
      <ul>
        {products.data.map((product) => ( // 假设 products 结构与 Stripe API 返回的 inventory 类似
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

// 示例：/app/api/products/route.js (一个服务器端 API 路由)
// import { stripe } from '../../../utils/stripe'; // 确保路径正确

// export async function GET(request) {
//   try {
//     const inventory = await stripe.products.list({ limit: 5 });
//     return new Response(JSON.stringify({ products: inventory }), {
//       status: 200,
//       headers: { 'Content-Type': 'application/json' },
//     });
//   } catch (error) {
//     console.error('Error fetching products:', error);
//     return new Response(JSON.stringify({ error: 'Failed to fetch products' }), {
//       status: 500,
//       headers: { 'Content-Type': 'application/json' },
//     });
//   }
// }