> ## 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 न्यूनतम बुनियाद

> अपने Next.js एप्लिकेशन में Dodo Payments को एकीकृत करने के लिए हमारे न्यूनतम Next.js बुनियाद के साथ जल्दी शुरू करें

## अवलोकन

Next.js न्यूनतम बुनियाद आपके Next.js एप्लिकेशन के साथ Dodo Payments को एकीकृत करने के लिए एक तैयार-से-उपयोग प्रारंभिक बिंदु प्रदान करता है। इस टेम्पलेट में चेकआउट सत्र, वेबहुक हैंडलिंग, ग्राहक पोर्टल, और आधुनिक UI घटक शामिल हैं जो आपको जल्दी से भुगतान स्वीकार करने में मदद करते हैं।

<Info>
  यह boilerplate Next.js 16 App Router को TypeScript, Tailwind CSS 4, और `@dodopayments/nextjs` एडेप्टर के साथ उपयोग करता है।
</Info>

### विशेषताएँ

* **Quick Setup** - 5 मिनट से कम में शुरू करें
* **Payment Integration** - Pre-configured checkout flow using `@dodopayments/nextjs`
* **Modern UI** - Tailwind CSS के साथ साफ़, डार्क-थीम वाली प्राइसिंग पेज
* **Webhook Handler** - भुगतान ईवेंट्स के लिए तुरंत उपयोग योग्य webhook endpoint
* **Customer Portal** - एक-क्लिक सब्सक्रिप्शन प्रबंधन
* **TypeScript** - न्यूनतम, केंद्रित प्रकारों के साथ पूर्ण रूप से टाइप किया गया
* **Pre-filled Checkout** - UX सुधारने के लिए ग्राहक डेटा पास करने का प्रदर्शन करता है

## पूर्वापेक्षाएँ

शुरू करने से पहले, सुनिश्चित करें कि आपके पास है:

* **Node.js 20.9+** (Next.js 16 के लिए आवश्यक)
* **Dodo Payments खाता** (डैशबोर्ड से API और वेबहुक कुंजी तक पहुँचने के लिए)

## त्वरित प्रारंभ

<Steps>
  <Step title="Clone the Repository">
    ```bash theme={null}
    git clone https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate.git
    cd dodo-nextjs-minimal-boilerplate
    ```
  </Step>

  <Step title="Install Dependencies">
    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Get API Credentials">
    Dodo Payments पर साइन अप करें और डैशबोर्ड से अपनी क्रेडेंशियल प्राप्त करें:

    * **API कुंजी:** [डैशबोर्ड → डेवलपर → API कुंजी](https://app.dodopayments.com/developer/api-keys)
    * **वेबहुक कुंजी:** [डैशबोर्ड → डेवलपर → वेबहुक](https://app.dodopayments.com/developer/webhooks)

    <Tip>
      डेवलपमेंट के दौरान सुनिश्चित करें कि आप **Test Mode** में हैं!
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    रूट डायरेक्टरी में `.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="Add Your Products">
    Dodo Payments से अपने वास्तविक उत्पाद IDs के साथ `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="Run the Development Server">
    ```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
```

## अनुकूलन

### उत्पाद जानकारी अपडेट करें

Inline\_CODE\_PLACEHOLDER\_9bcd8be2fcab8dfc\_END को संशोधित करने के लिए संपादित करें:

* Product IDs (अपने 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 प्राप्त करने के लिए एक परीक्षण खरीदारी पूरी कर सकते हैं।

## वेबहुक घटनाएँ

यह boilerplate `src/app/api/webhook/route.ts` में दो webhook ईवेंट्स को संभालने का प्रदर्शन करता है:

* `onSubscriptionActive` - जब एक सब्सक्रिप्शन सक्रिय हो जाए तो ट्रिगर होता है
* `onPaymentSucceeded` - जब भुगतान सफल हो जाए तो ट्रिगर होता है

इन हैंडलरों के अंदर अपना व्यावसायिक लॉजिक जोड़ें:

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

आवश्यकतानुसार अधिक वेबहुक घटनाएँ जोड़ें।

स्थानीय विकास के लिए, आप अपने स्थानीय सर्वर के लिए एक सुरक्षित टनल बनाने के लिए [ngrok](https://ngrok.com/) जैसे उपकरणों का उपयोग कर सकते हैं और इसे अपने वेबहुक 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 डैशबोर्ड में अपने पर्यावरण चर जोड़ना न भूलें!

### वेबहुक URL अपडेट करें

तैनाती के बाद, अपने वेबहुक URL को [Dodo Payments डैशबोर्ड](https://app.dodopayments.com/developer/webhooks) में अपडेट करें:

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

## समस्या निवारण

<AccordionGroup>
  <Accordion title="Module not found or build errors">
    `node_modules` को हटाएँ और निर्भरताएँ पुनः इंस्टॉल करें:

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

  <Accordion title="Checkout redirect fails">
    **सामान्य कारण:**

    * अमान्य उत्पाद ID - सुनिश्चित करें कि यह आपके Dodo डैशबोर्ड में मौजूद है
    * `.env` में गलत API key या environment सेटिंग
    * त्रुटियों के लिए ब्राउज़र कंसोल और टर्मिनल की जांच करें
  </Accordion>

  <Accordion title="Webhooks not receiving events">
    स्थानीय परीक्षण के लिए, अपने सर्वर को एक्सपोज़ करने के लिए [ngrok](https://ngrok.com) का उपयोग करें:

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

    अपने [Dodo dashboard](https://app.dodopayments.com/developer/webhooks) में webhook URL को ngrok URL पर अपडेट करें। सही webhook verification key के साथ अपनी .env फ़ाइल को अपडेट करना न भूलें।
  </Accordion>

  <Accordion title="Customer portal link doesn't work">
    `src/app/components/Header.tsx` में हार्डकोड किए गए `CUSTOMER_ID` को अपने Dodo डैशबोर्ड से वास्तविक ग्राहक ID से बदलें।

    या अपने प्रमाणीकरण सिस्टम और डेटाबेस को एकीकृत करें ताकि ग्राहक ID को गतिशील रूप से प्राप्त किया जा सके।
  </Accordion>
</AccordionGroup>

## अधिक जानें

* [डोडो पेमेंट्स दस्तावेज़](https://docs.dodopayments.com/)
* [चेकआउट सेशन्स दस्तावेज़](https://docs.dodopayments.com/developer-resources/checkout-session)
* [वेबहूक दस्तावेज़](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) से संपर्क करें