Next.js न्यूनतम बुनियाद

अवलोकन

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

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

विशेषताएँ

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 और वेबहुक कुंजी तक पहुँचने के लिए)

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

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 पर साइन अप करें और डैशबोर्ड से अपनी क्रेडेंशियल प्राप्त करें:

API कुंजी: डैशबोर्ड → डेवलपर → API कुंजी
वेबहुक कुंजी: डैशबोर्ड → डेवलपर → वेबहुक

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

Configure Environment Variables

रूट डायरेक्टरी में .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 में शामिल है।

Add Your Products

Dodo Payments से अपने वास्तविक उत्पाद IDs के साथ 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
];

Run the Development Server

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

अनुकूलन

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

Inline_CODE_PLACEHOLDER_9bcd8be2fcab8dfc_END को संशोधित करने के लिए संपादित करें:

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

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

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

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

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

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

आवश्यकतानुसार अधिक वेबहुक घटनाएँ जोड़ें। स्थानीय विकास के लिए, आप अपने स्थानीय सर्वर के लिए एक सुरक्षित टनल बनाने के लिए ngrok जैसे उपकरणों का उपयोग कर सकते हैं और इसे अपने वेबहुक URL के रूप में उपयोग कर सकते हैं।

तैनाती

उत्पादन के लिए निर्माण करें

npm run build
npm start

Vercel पर तैनात करें

[

](https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate) अपने Vercel डैशबोर्ड में अपने पर्यावरण चर जोड़ना न भूलें!

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

तैनाती के बाद, अपने वेबहुक URL को Dodo Payments डैशबोर्ड में अपडेट करें:

https://example.com/api/webhook

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

Module not found or build errors

node_modules को हटाएँ और निर्भरताएँ पुनः इंस्टॉल करें:

rm -rf node_modules package-lock.json
npm install

Checkout redirect fails

सामान्य कारण:

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

Webhooks not receiving events

स्थानीय परीक्षण के लिए, अपने सर्वर को एक्सपोज़ करने के लिए ngrok का उपयोग करें:

ngrok http 3000

अपने Dodo dashboard में webhook URL को ngrok URL पर अपडेट करें। सही webhook verification key के साथ अपनी .env फ़ाइल को अपडेट करना न भूलें।

Customer portal link doesn't work

src/app/components/Header.tsx में हार्डकोड किए गए CUSTOMER_ID को अपने Dodo डैशबोर्ड से वास्तविक ग्राहक ID से बदलें।या अपने प्रमाणीकरण सिस्टम और डेटाबेस को एकीकृत करें ताकि ग्राहक ID को गतिशील रूप से प्राप्त किया जा सके।

अधिक जानें

सहायता

बुनियाद के साथ मदद चाहिए?

प्रश्नों और चर्चाओं के लिए हमारे Discord समुदाय में शामिल हों
मुद्दों और अपडेट के लिए GitHub रिपॉजिटरी की जांच करें
सहायता के लिए हमारी सहायता टीम से संपर्क करें

​अवलोकन

​विशेषताएँ

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

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

​परियोजना संरचना

​अनुकूलन

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

​ग्राहक डेटा पूर्व-भरे

​ग्राहक पोर्टल अपडेट करें

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

​तैनाती

​उत्पादन के लिए निर्माण करें

​Vercel पर तैनात करें

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

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

​अधिक जानें

​सहायता

अवलोकन

विशेषताएँ

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

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

परियोजना संरचना

अनुकूलन

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

ग्राहक डेटा पूर्व-भरे

ग्राहक पोर्टल अपडेट करें

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

तैनाती

उत्पादन के लिए निर्माण करें

Vercel पर तैनात करें

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

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

अधिक जानें

सहायता