Next.js ミニマルボイラープレート - Dodo Payments Documentation

概要

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キーにアクセスするため)

クイックスタート

リポジトリをクローン

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

依存関係をインストール

npm install

API資格情報を取得

Dodo Paymentsにサインアップし、ダッシュボードから資格情報を取得してください：

APIキー: ダッシュボード → 開発者 → APIキー
Webhookキー: ダッシュボード → 開発者 → Webhooks

開発中はテストモードにいることを確認してください！

環境変数の設定

ルートディレクトリに .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 に含まれています。

製品を追加

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
];

開発サーバーを実行

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: "john@example.com",
},

顧客ポータルの更新

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にデプロイ

[

](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 キーまたは環境設定
エラーのためにブラウザコンソールとターミナルを確認してください

Webhookがイベントを受信しない

ローカルテストのために、ngrokを使用してサーバーを公開します：

ngrok http 3000

Webhook URLをngrok URLに更新するために、Dodoダッシュボードを更新します。正しいWebhook検証キーで.envファイルを更新することを忘れないでください。

顧客ポータルリンクが機能しない

CUSTOMER_ID を src/app/components/Header.tsx にハードコーディングされた値から、Dodo ダッシュボードの実際の顧客 ID に置き換えます。または、認証システムとデータベースを統合して、顧客IDを動的に取得します。

詳しく学ぶ

サポート

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

質問や議論のために、Discordコミュニティに参加してください
問題や更新については、GitHubリポジトリを確認してください
サポートが必要な場合は、サポートチームに連絡してください

​概要

​特徴

​前提条件

​クイックスタート

​プロジェクト構造

​カスタマイズ

​製品情報の更新

​顧客データの事前入力

​顧客ポータルの更新

​Webhookイベント

​デプロイメント

​本番用にビルド

​Vercelにデプロイ

​Webhook URLの更新

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

​詳しく学ぶ

​サポート

概要

特徴

前提条件

クイックスタート

プロジェクト構造

カスタマイズ

製品情報の更新

顧客データの事前入力

顧客ポータルの更新

Webhookイベント

デプロイメント

本番用にビルド

Vercelにデプロイ

Webhook URLの更新

トラブルシューティング

詳しく学ぶ

サポート