メインコンテンツへスキップ

​
概要

Next.jsミニマルボイラープレートは、Dodo PaymentsをNext.jsアプリケーションに統合するためのすぐに使える出発点を提供します。このテンプレートには、チェックアウトセッション、Webhook処理、顧客ポータル、そして迅速に支払いを受け入れるためのモダンなUIコンポーネントが含まれています。
このボイラープレートは、TypeScript、Tailwind CSS 4、および@dodopayments/nextjsアダプターを使用したNext.js 16 App Routerを使用しています。

​
特徴

  • クイックセットアップ - 5分以内で始められます
  • 支払い統合 - @dodopayments/nextjsを使用した事前設定されたチェックアウトフロー
  • モダンUI - Tailwind CSSを使用したクリーンでダークテーマの価格ページ
  • Webhookハンドラー - 支払いイベント用のすぐに使えるWebhookエンドポイント
  • 顧客ポータル - ワンクリックでのサブスクリプション管理
  • TypeScript - 最小限で焦点を絞った型を持つ完全な型付け
  • 事前入力されたチェックアウト - UXを向上させるために顧客データを渡すデモ

​
前提条件

始める前に、次のものを用意してください：
  • Node.js 20.9+ (Next.js 16に必要)
  • Dodo Paymentsアカウント (ダッシュボードからAPIおよびWebhookキーにアクセスするため)

​
クイックスタート

1

リポジトリをクローン

git clone https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate.git
cd dodo-nextjs-minimal-boilerplate
2

依存関係をインストール

npm install
3

API資格情報を取得

Dodo Paymentsにサインアップし、ダッシュボードから資格情報を取得してください：
開発中はテストモードにいることを確認してください！
4

環境変数を設定

ルートディレクトリに.envファイルを作成します：
cp .env.example .env
Dodo Paymentsの資格情報で値を更新してください：
DODO_PAYMENTS_API_KEY=your_api_key_here
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_signing_key_here
DODO_PAYMENTS_RETURN_URL=http://localhost:3000
DODO_PAYMENTS_ENVIRONMENT=test_mode
.envファイルをバージョン管理にコミットしないでください。これはすでに.gitignoreに含まれています。
5

製品を追加

Dodo Paymentsからの実際の製品IDでsrc/lib/products.tsを更新します：
export const products: Product[] = [
  {
    product_id: "pdt_001", // Replace with your product ID
    name: "Basic Plan",
    description: "Get access to basic features and support",
    price: 9999, // in cents
    features: [
      "Access to basic features",
      "Email support",
      "1 Team member",
      "Basic analytics",
    ],
  },
  // ... add more products
];
6

開発サーバーを実行

npm run dev
http://localhost:3000を開いて、価格ページを確認してください！

​
プロジェクト構造

src/
├── app/
│   ├── api/
│   │   ├── checkout/          # Checkout session handler
│   │   ├── customer-portal/   # Customer portal redirect
│   │   └── webhook/           # Webhook event handler
│   ├── components/
│   │   ├── Footer.tsx         # Reusable footer
│   │   ├── Header.tsx         # Navigation header
│   │   └── ProductCard.tsx    # Product pricing card
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Pricing page (home)
└── lib/
    └── products.ts            # Product definitions

​
カスタマイズ

​
製品情報の更新

src/lib/products.tsを編集して、以下を変更します：
  • 製品ID（Dodoダッシュボードから）
  • 価格
  • 特徴
  • 説明

​
顧客データの事前入力

src/app/components/ProductCard.tsxで、ハードコーディングされた値を実際のユーザーデータに置き換えます： 
customer: {
  name: "John Doe",
  email: "[email protected]",
},

​
顧客ポータルの更新

src/app/components/Header.tsxで、ハードコーディングされた顧客IDを置き換えます： 
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
テスト用の顧客IDを取得するためにテスト購入を完了できます。

​
Webhookイベント

このボイラープレートは、src/app/api/webhook/route.tsで2つのWebhookイベントを処理する方法を示しています：
  • onSubscriptionActive - サブスクリプションがアクティブになるとトリガーされます
  • onPaymentSucceeded - 支払いが成功するとトリガーされます
これらのハンドラー内にビジネスロジックを追加します： 
onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},
必要に応じて、さらにWebhookイベントを追加します。 ローカル開発のために、ngrokのようなツールを使用して、ローカルサーバーへの安全なトンネルを作成し、それをWebhook URLとして使用できます。

​
デプロイメント

​
本番用にビルド

npm run build
npm start

​
Vercelにデプロイ

[ Vercelでデプロイ ](https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate) Vercelダッシュボードに環境変数を追加するのを忘れないでください！

​
Webhook URLの更新

デプロイ後、Dodo PaymentsダッシュボードでWebhook URLを更新します： 
https://example.com/api/webhook

​
トラブルシューティング

node_modulesを削除し、依存関係を再インストールします：
rm -rf node_modules package-lock.json
npm install
一般的な原因：
  • 無効な製品ID - Dodoダッシュボードに存在することを確認してください
  • .envのAPIキーまたは環境設定が間違っている
  • エラーのためにブラウザコンソールとターミナルを確認してください
ローカルテストのために、ngrokを使用してサーバーを公開します：
ngrok http 3000
Webhook URLをngrok URLに更新するために、Dodoダッシュボードを更新します。正しいWebhook検証キーで.envファイルを更新することを忘れないでください。
CUSTOMER_IDをsrc/app/components/Header.tsx内のハードコーディングされた値と置き換え、Dodoダッシュボードからの実際の顧客IDを使用します。または、認証システムとデータベースを統合して、顧客IDを動的に取得します。

​
詳しく学ぶ

​
サポート

ボイラープレートに関して助けが必要ですか？