# Prompt pour créer une page de tarification SaaS dans Next.js

> Prompt IA prêt à copier-coller pour créer une page de tarification SaaS dans Next.js avec Tailwind, bascule de facturation et données de plan prêtes pour Stripe.

**Type:** Prompt  
**Tools:** Cursor, Claude Code, Codex, Windsurf  
**Stack:** Next.js, TypeScript, Tailwind  
**Difficulty:** easy  
**Updated:** 2026-06-08

---

Utilisez ce prompt pour générer une page de tarification soignée et optimisée pour la conversion, avec une bascule de facturation mensuelle/annuelle, un palier « Most Popular » mis en évidence, et une configuration de plan typée qui se connecte directement à Stripe Checkout — aucune donnée factice.

## Prompt principal

```txt title="Main Prompt"
You are working in a Next.js App Router project using TypeScript and Tailwind CSS v4.

Task: create a `/pricing` page with the following specification.

Plan data:
- Starter: $0/mo, $0/yr — 1 user, 5 projects, community support.
- Pro: $19/mo, $190/yr — 5 users, unlimited projects, email support. Mark as "Most Popular".
- Enterprise: $99/mo, $990/yr — unlimited users, SSO, dedicated support.

UI requirements:
- A client component `<PricingToggle>` with monthly/annual switch; annual shows "Save 17%".
- A `<PricingCard>` component per plan with: name, price, feature list, CTA button.
- "Most Popular" card has a highlighted border and badge.
- CTA buttons call `handleCheckout(planId, interval)` — stub it for now, we will wire Stripe later.
- The page file itself must be a Server Component; only the toggle and cards are Client Components.
- Use Tailwind utility classes only — no CSS modules, no inline styles.

Type requirements:
- Export a `Plan` interface from `src/lib/pricing.ts`.
- Plan data lives in that same file as a `const PLANS: Plan[]`.

Do NOT install any new packages. Stop and list all files before writing code.
```

## Notes d'implémentation

- La page doit être un composant serveur pour être rendue statiquement ; déplacez `'use client'` uniquement vers les composants de bascule et de carte qui nécessitent `useState`.
- `handleCheckout` doit accepter `(planId: string, interval: 'monthly' | 'annual')` — cette signature correspond au prompt Stripe Checkout, donc gardez-la stable.
- Tailwind v4 utilise une configuration CSS-first ; évitez `tailwind.config.ts` sauf s'il existe déjà.

## Modifications de fichiers attendues

```txt
src/app/pricing/page.tsx            (new — Server Component)
src/components/PricingToggle.tsx    (new — Client Component)
src/components/PricingCard.tsx      (new — Client Component)
src/lib/pricing.ts                  (new — Plan type + PLANS constant)
```

## Critères d'acceptation

- `bun run build` se termine avec le code 0 et aucune erreur TypeScript.
- Le basculement mensuel/annuel met à jour les prix des trois cartes sans rechargement complet de la page.
- Le badge « Most Popular » est visible sur la carte Pro.
- `handleCheckout` est appelé avec le bon `planId` et `interval` lorsqu'un CTA est cliqué.

## Commandes de test

```bash
bun run typecheck
bun run build
bun run dev
# open http://localhost:3000/pricing and verify toggle behavior
```

## Erreurs courantes des IA

- Marquer le fichier page lui-même avec `'use client'`, ce qui empêche le rendu serveur.
- Coder en dur les prix dans le JSX au lieu de les dériver de `PLANS`.
- Utiliser des motifs `theme.extend` dans `tailwind.config.ts` qui ne s'appliquent pas à Tailwind v4.
- Oublier d'exporter le type `Plan`, ce qui casse l'intégration Stripe Checkout ultérieurement.

## Prompt de correction

```txt title="Fix Prompt"
The pricing page has type errors or the toggle doesn't work. Fix in this order:
1. Remove `'use client'` from `src/app/pricing/page.tsx` — only the child components need it.
2. Make sure `PricingToggle` uses `useState` for the billing interval and passes it down via props.
3. Confirm `handleCheckout` signature is `(planId: string, interval: 'monthly' | 'annual') => void`.
Show the corrected diff only — do not rewrite unrelated files.
```