> ## 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 Minimal Boilerplate
> Commencez rapidement avec notre boilerplate minimal Next.js pour intégrer Dodo Payments dans votre application Next.js
## Aperçu
Le boilerplate minimal Next.js fournit un point de départ prêt à l'emploi pour intégrer Dodo Payments avec votre application Next.js. Ce modèle inclut des sessions de paiement, la gestion des webhooks, un portail client et des composants UI modernes pour vous aider à commencer à accepter des paiements rapidement.
Cette base utilise Next.js 16 App Router avec TypeScript, Tailwind CSS 4 et l’adaptateur `@dodopayments/nextjs`.
### Caractéristiques
* **Quick Setup** - Commencez en moins de 5 minutes
* **Payment Integration** - Flux de paiement préconfiguré utilisant `@dodopayments/nextjs`
* **Modern UI** - Page tarifaire épurée avec thème sombre en Tailwind CSS
* **Webhook Handler** - Point de terminaison webhook prêt à l’emploi pour les événements de paiement
* **Customer Portal** - Gestion des abonnements en un clic
* **TypeScript** - Complètement typé avec des types minimaux et ciblés
* **Pre-filled Checkout** - Montre comment transmettre les données client pour améliorer l’expérience utilisateur
## Prérequis
Avant de commencer, assurez-vous d'avoir :
* **Node.js 20.9+** (nécessaire pour Next.js 16)
* **Compte Dodo Payments** (pour accéder aux clés API et Webhook depuis le tableau de bord)
## Démarrage Rapide
```bash theme={null}
git clone https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate.git
cd dodo-nextjs-minimal-boilerplate
```
```bash theme={null}
npm install
```
Inscrivez-vous sur [Dodo Payments](https://dodopayments.com/) et récupérez vos identifiants depuis le tableau de bord :
* **Clé API :** [Tableau de bord → Développeur → Clés API](https://app.dodopayments.com/developer/api-keys)
* **Clé Webhook :** [Tableau de bord → Développeur → Webhooks](https://app.dodopayments.com/developer/webhooks)
Assurez-vous d’être en **mode Test** pendant le développement !
Créez un fichier `.env` à la racine du projet :
```bash theme={null}
cp .env.example .env
```
Mettez à jour les valeurs avec vos identifiants 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
```
Ne commitez jamais votre fichier `.env` dans le contrôle de version. Il est déjà inclus dans `.gitignore`.
Mettez à jour `src/lib/products.ts` avec vos véritables identifiants de produit depuis Dodo Payments :
```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
];
```
```bash theme={null}
npm run dev
```
Ouvrez [http://localhost:3000](http://localhost:3000) pour voir votre page tarifaire !
## Structure du Projet
```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
```
## Personnalisation
### Mettre à Jour les Informations sur les Produits
Modifiez `src/lib/products.ts` pour ajuster :
* les identifiants de produit (depuis votre tableau de bord Dodo)
* les tarifs
* les fonctionnalités
* les descriptions
### Pré-remplir les Données Client
Dans `src/app/components/ProductCard.tsx`, remplacez les valeurs codées en dur par vos véritables données utilisateur :
```typescript theme={null}
customer: {
name: "John Doe",
email: "john@example.com",
},
```
### Mettre à Jour le Portail Client
Dans `src/app/components/Header.tsx`, remplacez l’identifiant client codé en dur :
```typescript theme={null}
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
```
Vous pouvez effectuer un achat test pour obtenir l'identifiant client pour les tests.
## Événements Webhook
Le boilerplate montre la gestion de deux événements webhook dans `src/app/api/webhook/route.ts` :
* `onSubscriptionActive` - Déclenché lorsqu’un abonnement devient actif
* `onPaymentSucceeded` - Déclenché lorsqu’un paiement réussit
Ajoutez votre logique métier à l'intérieur de ces gestionnaires :
```typescript theme={null}
onSubscriptionActive: async (payload) => {
// Grant access to your product
// Update user database
// Send welcome email
},
```
Ajoutez d'autres événements webhook si nécessaire.
Pour le développement local, vous pouvez utiliser des outils comme [ngrok](https://ngrok.com/) pour créer un tunnel sécurisé vers votre serveur local et l'utiliser comme votre URL de webhook.
## Déploiement
### Construire pour la Production
```bash theme={null}
npm run build
npm start
```
### Déployer sur Vercel
\[
]\([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))
N'oubliez pas d'ajouter vos variables d'environnement dans le tableau de bord Vercel !
### Mettre à Jour l'URL du Webhook
Après le déploiement, mettez à jour votre URL de webhook dans le [Tableau de bord Dodo Payments](https://app.dodopayments.com/developer/webhooks) :
```
https://example.com/api/webhook
```
## Dépannage
Supprimez `node_modules` et réinstallez les dépendances :
```bash theme={null}
rm -rf node_modules package-lock.json
npm install
```
**Causes courantes :**
* Identifiant de produit invalide : vérifiez qu’il existe dans votre tableau de bord Dodo
* Mauvaise clé API ou configuration d’environnement dans `.env`
* Consultez la console du navigateur et le terminal pour rechercher des erreurs
Pour les tests locaux, utilisez [ngrok](https://ngrok.com) afin d’exposer votre serveur :
```bash theme={null}
ngrok http 3000
```
Mettez à jour l’URL du webhook dans votre [tableau de bord Dodo](https://app.dodopayments.com/developer/webhooks) avec l’URL ngrok. Pensez à mettre à jour votre fichier .env avec la bonne clé de vérification du webhook.
Remplacez `CUSTOMER_ID` codé en dur dans `src/app/components/Header.tsx` par un véritable identifiant client issu de votre tableau de bord Dodo.
Ou intégrez votre système d’authentification et base de données pour récupérer dynamiquement l’identifiant client.
## En Savoir Plus
* [Documentation Dodo Payments](https://docs.dodopayments.com/)
* [Documentation des sessions de paiement](https://docs.dodopayments.com/developer-resources/checkout-session)
* [Documentation des Webhooks](https://docs.dodopayments.com/developer-resources/webhooks)
## Support
Besoin d'aide avec le boilerplate ?
* Rejoignez notre [communauté Discord](https://discord.gg/bYqAp4ayYh) pour des questions et des discussions
* Consultez le [référentiel GitHub](https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate) pour les problèmes et les mises à jour
* Contactez notre [équipe de support](mailto:support@dodopayments.com) pour obtenir de l'aide