ECサイト
Stripe 決済を組み込んだ小規模向け EC サイト。商品管理・在庫管理・注文管理をヘッドレス CMS と連携して実現。Vercel Edge Functions と ISR を活用し、高速なページ表示を維持しています。
技術スタック
Next.jsStripePrismaPostgreSQLVercel
タグ
フルスタックECバックエンド
概要
個人事業主や小規模ショップ向けのシンプルな EC サイトです。Shopify のような重厚なプラットフォームを使わず、Next.js でフルスクラッチ実装することで、デザインの自由度とランニングコストの最小化を両立しました。
主な機能
- 商品一覧・詳細ページ（ISR によるキャッシュ）
- ショッピングカート（ローカルストレージ管理）
- Stripe Checkout による決済フロー
- 管理画面（商品・在庫・注文の管理）
- 注文確認メール（Resend 使用）
Stripe 連携の実装
// 決済セッションの作成
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: cartItems.map(item => ({
price_data: {
currency: 'jpy',
product_data: { name: item.name },
unit_amount: item.price,
},
quantity: item.quantity,
})),
mode: 'payment',
success_url: `${baseUrl}/order/success?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${baseUrl}/cart`,
})
Webhook で決済完了イベントを受け取り、在庫の減算と注文レコードの作成を行っています。
ISR によるパフォーマンス最適化
商品ページは ISR（Incremental Static Regeneration）を採用し、revalidate: 60 で1分ごとに再生成。在庫状況の更新に対応しつつ、静的配信の速度も維持しています。
学んだこと
Stripe の Webhook は冪等性の担保が重要です。ネットワーク障害でリトライが来た際に二重決済にならないよう、stripe_event_id をユニーク制約付きで保存し、処理済みのイベントをスキップする実装が必要でした。