> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Dodo PaymentsをNext.jsアプリケーションに統合するためのミニマルなNext.jsボイラープレートで迅速に始めましょう

## 概要

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

<Info>
  このボイラープレートは、TypeScript、Tailwind CSS 4、および `@dodopayments/nextjs` アダプターを使用した Next.js 16 App Router を使用しています。
</Info>

### 特徴

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

## 前提条件

始める前に、次のものを用意してください：

* **Node.js 20.9+** (Next.js 16に必要)
* **Dodo Paymentsアカウント** (ダッシュボードからAPIおよびWebhookキーにアクセスするため)

## クイックスタート

<Steps>
  <Step title="リポジトリをクローン">
    ```bash theme={null}
    git clone https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate.git
    cd dodo-nextjs-minimal-boilerplate
    ```
  </Step>

  <Step title="依存関係をインストール">
    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="API資格情報を取得">
    [Dodo Payments](https://dodopayments.com/)にサインアップし、ダッシュボードから資格情報を取得してください：

    * **APIキー:** [ダッシュボード → 開発者 → APIキー](https://app.dodopayments.com/developer/api-keys)
    * **Webhookキー:** [ダッシュボード → 開発者 → Webhooks](https://app.dodopayments.com/developer/webhooks)

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

  <Step title="環境変数の設定">
    ルートディレクトリに `.env` ファイルを作成します:

    ```bash theme={null}
    cp .env.example .env
    ```

    Dodo Paymentsの資格情報で値を更新してください：

    ```env theme={null}
    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
    ```

    <Warning>
      決して `.env` ファイルをバージョン管理にコミットしないでください。これはすでに `.gitignore` に含まれています。
    </Warning>
  </Step>

  <Step title="製品を追加">
    Dodo Payments からの実際の製品 ID で `src/lib/products.ts` を更新します:

    ```typescript theme={null}
    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
    ];
    ```
  </Step>

  <Step title="開発サーバーを実行">
    ```bash theme={null}
    npm run dev
    ```

    [http://localhost:3000](http://localhost:3000)を開いて、価格ページを確認してください！
  </Step>
</Steps>

## プロジェクト構造

```text theme={null}
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` で、ハードコーディングされた値を実際のユーザーデータに置き換えます:

```typescript theme={null}
customer: {
  name: "John Doe",
  email: "john@example.com",
},
```

### 顧客ポータルの更新

`src/app/components/Header.tsx` で、ハードコーディングされた顧客 ID を置き換えます:

```typescript theme={null}
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
```

テスト用の顧客IDを取得するためにテスト購入を完了できます。

## Webhookイベント

このボイラープレートは、`src/app/api/webhook/route.ts` で 2 つの webhook イベントを処理することを示しています:

* `onSubscriptionActive` - サブスクリプションがアクティブになるとトリガーされます
* `onPaymentSucceeded` - 支払いが成功するとトリガーされます

これらのハンドラー内にビジネスロジックを追加します：

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

必要に応じて、さらにWebhookイベントを追加します。

ローカル開発のために、[ngrok](https://ngrok.com/)のようなツールを使用して、ローカルサーバーへの安全なトンネルを作成し、それをWebhook URLとして使用できます。

## デプロイメント

### 本番用にビルド

```bash theme={null}
npm run build
npm start
```

### Vercelにデプロイ

\[

![Vercelでデプロイ](https://vercel.com/button)

]\([https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate](https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate))

Vercelダッシュボードに環境変数を追加するのを忘れないでください！

### Webhook URLの更新

デプロイ後、[Dodo Paymentsダッシュボード](https://app.dodopayments.com/developer/webhooks)でWebhook URLを更新します：

```
https://example.com/api/webhook
```

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

<AccordionGroup>
  <Accordion title="モジュールが見つからないまたはビルドエラー">
    `node_modules` を削除し、依存関係を再インストールします:

    ```bash theme={null}
    rm -rf node_modules package-lock.json
    npm install
    ```
  </Accordion>

  <Accordion title="チェックアウトリダイレクトが失敗する">
    **一般的な原因:**

    * 無効な製品 ID - Dodo ダッシュボードに存在することを確認してください
    * `.env` の間違った API キーまたは環境設定
    * エラーのためにブラウザコンソールとターミナルを確認してください
  </Accordion>

  <Accordion title="Webhookがイベントを受信しない">
    ローカルテストのために、[ngrok](https://ngrok.com)を使用してサーバーを公開します：

    ```bash theme={null}
    ngrok http 3000
    ```

    Webhook URLをngrok URLに更新するために、[Dodoダッシュボード](https://app.dodopayments.com/developer/webhooks)を更新します。正しいWebhook検証キーで.envファイルを更新することを忘れないでください。
  </Accordion>

  <Accordion title="顧客ポータルリンクが機能しない">
    `CUSTOMER_ID` を `src/app/components/Header.tsx` にハードコーディングされた値から、Dodo ダッシュボードの実際の顧客 ID に置き換えます。

    または、認証システムとデータベースを統合して、顧客IDを動的に取得します。
  </Accordion>
</AccordionGroup>

## 詳しく学ぶ

* [Dodo Payments ドキュメント](https://docs.dodopayments.com/)
* [チェックアウトセッション ドキュメント](https://docs.dodopayments.com/developer-resources/checkout-session)
* [Webhooks ドキュメント](https://docs.dodopayments.com/developer-resources/webhooks)

## サポート

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

* 質問や議論のために、[Discordコミュニティ](https://discord.gg/bYqAp4ayYh)に参加してください
* 問題や更新については、[GitHubリポジトリ](https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate)を確認してください
* サポートが必要な場合は、[サポートチーム](mailto:support@dodopayments.com)に連絡してください