microCMS × Stripe シンプルコマーステンプレート

microCMSで商品を管理し、Stripe Checkoutで決済処理を行うNext.jsベースのEコマーステンプレート。商品情報の同期、下書きプレビュー、webhook連携など実用的な機能を搭載し、すぐに使えるEコマースサイトを構築できます。

主な機能

• 商品表示: microCMSで管理する商品をホームページに一覧表示
• 商品詳細ページ: 各商品の詳細情報を表示する個別ページ
• Stripe統合: Stripe Checkoutを使用したセキュアな決済処理
• Webhook同期: microCMSのwebhookで商品情報と価格をStripeと同期（オプション）
• 下書きプレビュー: コンテンツの下書きをプレビューする機能
• レスポンシブデザイン: Tailwind CSSによるモダンなUIデザイン

技術スタック

• フレームワーク: Next.js (Node.js 16.8以上)
• 言語: TypeScript (コードベースの95.2%)
• スタイリング: Tailwind CSS
• CMS: microCMS API
• 決済: Stripe API

セットアップ

以下の環境変数を設定する必要があります：

MICROCMS_API_KEY=your_microcms_api_key
MICROCMS_SERVICE_DOMAIN=your_service_domain
STRIPE_SECRET_API_KEY=your_stripe_secret_key

開発サーバーの起動

npm run dev

高度な機能

このテンプレートには、microCMSからStripeへの商品情報と価格の変更をリアルタイムで同期するwebhook API（app/api/webhook/route.ts）が含まれています。これにより、CMSでの商品情報の更新が自動的にStripeに反映されます。

利点

このテンプレートを使用することで、ヘッドレスCMSとStripe決済を組み合わせたEコマースサイトを素早く構築できます。商品管理はmicroCMSの直感的なUIで行い、決済処理はStripeのセキュアなインフラを活用できます。

対応プラットフォーム

macOS、Windows（WSLを含む）、Linuxで動作します。

タグ

ライセンス

MIT