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.

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

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

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

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

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.