如何用 Next.js 和 Stripe 构建电商网站

项目简介

这是一个完整的电商网站教程，使用 Next.js 15 和 Stripe 支付集成。

技术栈

• 前端: Next.js 15 + React 19
• 支付: Stripe
• 数据库: PostgreSQL
• 部署: Vercel

核心功能

1. 产品展示

export default function ProductList() {
  const products = await getProducts();
  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

2. 购物车功能

购物车使用 Context API 管理状态：

const CartContext = createContext();

export function CartProvider({ children }) {
  const [items, setItems] = useState([]);
  
  const addItem = (product) => {
    setItems([...items, product]);
  };
  
  return (
    <CartContext.Provider value={{ items, addItem }}>
      {children}
    </CartContext.Provider>
  );
}

3. Stripe 支付集成

服务端代码：

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export async function createCheckoutSession(items) {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: items.map(item => ({
      price_data: {
        currency: 'usd',
        product_data: {
          name: item.name,
        },
        unit_amount: item.price * 100,
      },
      quantity: item.quantity,
    })),
    mode: 'payment',
    success_url: `${process.env.NEXT_PUBLIC_URL}/success`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`,
  });
  
  return session;
}

部署步骤

1. 克隆仓库
2. 安装依赖: npm install
3. 配置环境变量
4. 运行开发服务器: npm run dev
5. 部署到 Vercel

环境变量配置

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
DATABASE_URL=postgresql://xxx

常见问题

Q: 如何测试支付？

A: 使用 Stripe 测试卡号 4242 4242 4242 4242

Q: 如何处理 Webhook？

A: 在 Stripe Dashboard 中配置 Webhook URL

总结

通过本教程，你学会了如何构建一个完整的电商网站。