Next.js ミニマルボイラープレート

概要

Next.js の最小ボイラープレートは、Dodo Payments がすでに接続されたスターターアプリです。API キーと product IDs を追加すると、checkout を開く料金ページ、payment events 用の webhook endpoint、および Customer Portal へのリンクを利用できます。

このボイラープレートは、TypeScript、Tailwind CSS 4、および @dodopayments/nextjs adaptor を使用する Next.js 16 App Router を採用しています。既存のアプリに同じ route handlers を追加する方法については、Next.js Adaptor を参照してください。

特徴

ボイラープレートには次の機能が含まれています。

Quick Setup: クローンしてから約 5 分で稼働中の料金ページを用意できます。
Checkout: @dodopayments/nextjs を基盤に構築された、事前設定済みの checkout flow。
Pricing Page: Tailwind CSS でスタイル設定されたダークテーマの料金ページ。
Webhook Handler: 各 webhook signature を検証し、イベントに対してコードを実行する endpoint。
Customer Portal: Customer Portal を開く header link。顧客はここで subscriptions を管理できます。
TypeScript: 型付けされた product definitions と handlers。
Pre-filled Checkout: 顧客の name と email を checkout に渡すため、顧客が再入力する必要はありません。

前提条件

始める前に、次のものが必要です。

Node.js 20.9 以降。Next.js 16 で必要です。
Dodo Payments account。dashboard で API key と webhook signing secret を作成するために必要です。

クイックスタート

Clone the Repository

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

Install Dependencies

npm install

Get API Credentials

Dodo Payments にサインアップし、dashboard から credentials を取得します。

API Key: Dashboard → Developer → API Keys で key を作成します。
Webhook Key: Dashboard → Developer → Webhooks で endpoint を追加し、その signing secret をコピーします。endpoint URL は公開されており、HTTPS を使用する必要があります。マシンで events を受信する方法については、Webhook Events を参照してください。

サイドバーの Live Mode switch がオフの状態で、両方を作成してください。test mode key は DODO_PAYMENTS_ENVIRONMENT=test_mode でのみ動作し、test mode payments では実際のお金は移動しません。

Configure Environment Variables

example file をコピーして、root directory に .env file を作成します。

cp .env.example .env

Dodo Payments credentials に値を設定します。

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

route handlers は次の variables を読み取ります。

DODO_PAYMENTS_API_KEY は checkout と Customer Portal handlers を authenticate します。
DODO_PAYMENTS_WEBHOOK_KEY は webhook signatures を verify します。
DODO_PAYMENTS_RETURN_URL は、payment 後に checkout が customer を送る先です。
DODO_PAYMENTS_ENVIRONMENT は test_mode または live_mode です。

.env file を version control に commit しないでください。repository の .gitignore はすでにこの file を除外しています。

Add Your Products

src/lib/products.ts 内の sample products を自分のものに置き換えます。各 product_id に、dashboard の Products にある product の ID を設定します。

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

pricing page は、この file の name、description、price、および features を表示します。checkout では Dodo Payments の product に設定された price が請求されるため、price と product の値を同期してください。

Run the Development Server

npm run dev

http://localhost:3000 を開くと、pricing page を確認できます。

プロジェクト構成

checkout、Customer Portal、および webhook route handlers は src/app/api/ 配下にあります。

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

カスタマイズ

Product Information の更新

src/lib/products.ts を編集して、次を変更します。

Dodo Payments dashboard の Products にある Product IDs
Prices
Features
Descriptions

Customer Data の事前入力

src/app/components/ProductCard.tsx は、各 checkout request に hardcoded な name と email を送信します。これらをサインイン中の user の details に置き換えてください。

customer: {
  name: "John Doe",
  email: "john@example.com",
},

Customer Portal の更新

src/app/components/Header.tsx の Customer Portal link は、hardcoded な customer ID を使用して /api/customer-portal を開きます。これをサインイン中の user の Dodo Payments customer ID に置き換えてください。

const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID

testing 用の customer ID を取得するには、test purchase を完了してから、dashboard の Customers で customer の ID をコピーします。production では、backend から ID を取得してください。

Webhook Events

src/app/api/webhook/route.ts の handler は、DODO_PAYMENTS_WEBHOOK_KEY で各 request を verify してから、2 つの events を処理します。

subscription が active になると onSubscriptionActive が実行されます（subscription.active）。
payment が成功すると onPaymentSucceeded が実行されます（payment.succeeded）。

これらの handlers 内に business logic を追加します。

onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},

さらに events を処理するには、onSubscriptionCancelled などの handlers を追加します。Next.js Adaptor に、サポートされているすべての handlers が記載されています。 Dodo Payments から localhost にアクセスすることはできません。local development では、ngrok などの tunnel を使用して local server を公開し、その tunnel URL を webhook endpoint として使用してください。

デプロイ

Production 用に Build する

npm run build
npm start

Vercel に Deploy する

[

](https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate) Vercel dashboard に 4 つの environment variables を追加し、DODO_PAYMENTS_RETURN_URL を production URL に設定します。

Webhook URL の更新

deploy 後、Dodo Payments Dashboard に production webhook URL を追加します。example.com の箇所には自分の domain を指定してください。

https://example.com/api/webhook

各 endpoint には独自の signing secret があります。新しい endpoint の secret を、production environment の DODO_PAYMENTS_WEBHOOK_KEY にコピーします。

トラブルシューティング

Module not found or build errors

node_modules と package-lock.json を削除してから、dependencies を再インストールします。

rm -rf node_modules package-lock.json
npm install

Checkout redirect fails

次の一般的な原因を確認してください。

Product ID が Dodo Payments dashboard に存在しない。
.env の API key または DODO_PAYMENTS_ENVIRONMENT が間違っている。test mode key は test_mode でのみ動作します。

browser console と、npm run dev を実行している terminal で error を確認してください。

Webhooks not receiving events

local testing では、ngrok を使用して server を公開します。

ngrok http 3000

Dodo dashboard で、ngrok HTTPS URL の後に /api/webhook を付けた endpoint を追加します。その endpoint の signing secret を DODO_PAYMENTS_WEBHOOK_KEY として、.env file にコピーします。

Customer portal link doesn't work

src/app/components/Header.tsx の hardcoded な CUSTOMER_ID を、Dodo Payments dashboard にある customer の ID に置き換えます。production では、代わりに authentication system と database から customer ID を取得してください。

詳細情報

Dodo Payments Documentation
Checkout Sessions Documentation
Webhooks Documentation
Next.js Adaptor: Checkout、CustomerPortal、および Webhooks handlers の options

サポート

ボイラープレートについてサポートが必要な場合：

Discord community で質問してください。
GitHub repository で issues を報告し、updates を確認してください。
support team にメールしてください。

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

概要

特徴

前提条件

クイックスタート

プロジェクト構成

カスタマイズ

Product Information の更新

Customer Data の事前入力

Customer Portal の更新

Webhook Events

デプロイ

Production 用に Build する

Vercel に Deploy する

Webhook URL の更新

トラブルシューティング

詳細情報

サポート

​概要

​特徴

​前提条件

​クイックスタート

​プロジェクト構成

​カスタマイズ

​Product Information の更新

​Customer Data の事前入力

​Customer Portal の更新

​Webhook Events

​デプロイ

​Production 用に Build する

​Vercel に Deploy する

​Webhook URL の更新

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

​詳細情報

​サポート

概要

特徴

前提条件

クイックスタート

プロジェクト構成

カスタマイズ

Product Information の更新

Customer Data の事前入力

Customer Portal の更新

Webhook Events

デプロイ

Production 用に Build する

Vercel に Deploy する

Webhook URL の更新

トラブルシューティング

詳細情報

サポート