{
  "id": "build-a-saas-pricing-page",
  "type": "prompts",
  "category": "prompts",
  "locale": "de",
  "url": "/de/prompts/build-a-saas-pricing-page",
  "title": "Prompt zum Erstellen einer SaaS-Preisseite in Next.js",
  "description": "Copy-Paste-KI-Prompt zum Erstellen einer SaaS-Preisseite in Next.js mit Tailwind, Umschaltmöglichkeit für Abrechnung und Stricke-ready-Plan-Daten.",
  "tools": [
    "Cursor",
    "Claude Code",
    "Codex",
    "Windsurf"
  ],
  "stack": [
    "Next.js",
    "TypeScript",
    "Tailwind"
  ],
  "tags": [
    "nextjs",
    "tailwind",
    "typescript",
    "build"
  ],
  "difficulty": "easy",
  "updated": "2026-06-08",
  "markdown": "Verwenden Sie diesen Prompt, um eine polierte, konversionsoptimierte Preisseite mit einem\nmonatlichen/jährlichen Abrechnungsumschalter, einer hervorgehobenen „Beliebteste“-Stufe und einer typisierten Plan-\nKonfiguration zu erstellen, die direkt in Stripe Checkout einbindet – keine Platzhalterdaten.\n\n## Haupt-Prompt\n\n```txt title=\"Main Prompt\"\nYou are working in a Next.js App Router project using TypeScript and Tailwind CSS v4.\n\nTask: create a `/pricing` page with the following specification.\n\nPlan data:\n- Starter: $0/mo, $0/yr — 1 user, 5 projects, community support.\n- Pro: $19/mo, $190/yr — 5 users, unlimited projects, email support. Mark as \"Most Popular\".\n- Enterprise: $99/mo, $990/yr — unlimited users, SSO, dedicated support.\n\nUI requirements:\n- A client component `<PricingToggle>` with monthly/annual switch; annual shows \"Save 17%\".\n- A `<PricingCard>` component per plan with: name, price, feature list, CTA button.\n- \"Most Popular\" card has a highlighted border and badge.\n- CTA buttons call `handleCheckout(planId, interval)` — stub it for now, we will wire Stripe later.\n- The page file itself must be a Server Component; only the toggle and cards are Client Components.\n- Use Tailwind utility classes only — no CSS modules, no inline styles.\n\nType requirements:\n- Export a `Plan` interface from `src/lib/pricing.ts`.\n- Plan data lives in that same file as a `const PLANS: Plan[]`.\n\nDo NOT install any new packages. Stop and list all files before writing code.\n```\n\n## Implementierungshinweise\n\n- Die Seite muss eine Server-Komponente sein, damit sie statisch rendern kann; heben Sie `'use client'` nur auf\ndie Umschalt- und Kartenkomponenten, die `useState` benötigen.\n- `handleCheckout` sollte `(planId: string, interval: 'monthly' | 'annual')` akzeptieren – diese\nSignatur entspricht dem Stripe Checkout Prompt, also halten Sie sie stabil.\n- Tailwind v4 verwendet CSS-first-Konfiguration; vermeiden Sie `tailwind.config.ts`, es sei denn, es existiert bereits.\n\n## Erwartete Dateiänderungen\n\n```txt\nsrc/app/pricing/page.tsx            (new — Server Component)\nsrc/components/PricingToggle.tsx    (new — Client Component)\nsrc/components/PricingCard.tsx      (new — Client Component)\nsrc/lib/pricing.ts                  (new — Plan type + PLANS constant)\n```\n\n## Akzeptanzkriterien\n\n- `bun run build` beendet mit Exit-Code 0 ohne TypeScript-Fehler.\n- Umschalten zwischen monatlich/jährlich aktualisiert alle drei Kartenpreise ohne vollständigen Seitenneulad.\n- Das Abzeichen „Beliebteste“ ist auf der Pro-Karte sichtbar.\n- `handleCheckout` wird mit der korrekten `planId` und `interval` aufgerufen, wenn ein CTA geklickt wird.\n\n## Testbefehle\n\n```bash\nbun run typecheck\nbun run build\nbun run dev\n# open http://localhost:3000/pricing and verify toggle behavior\n```\n\n## Häufige KI-Fehler\n\n- Die Seitendatei selbst als `'use client'` markieren, was das Server-Rendering verhindert.\n- Preise fest in JSX codieren, anstatt sie aus `PLANS` abzuleiten.\n- `tailwind.config.ts` mit `theme.extend`-Mustern verwenden, die für Tailwind v4 nicht gelten.\n- Vergessen, den Typ `Plan` zu exportieren, was die spätere Stripe-Checkout-Integration beeinträchtigt.\n\n## Fix-Prompt\n\n```txt title=\"Fix Prompt\"\nThe pricing page has type errors or the toggle doesn't work. Fix in this order:\n1. Remove `'use client'` from `src/app/pricing/page.tsx` — only the child components need it.\n2. Make sure `PricingToggle` uses `useState` for the billing interval and passes it down via props.\n3. Confirm `handleCheckout` signature is `(planId: string, interval: 'monthly' | 'annual') => void`.\nShow the corrected diff only — do not rewrite unrelated files.\n```"
}