Um mit Next.js in 2026 eine Quiz-App zu erstellen, modellieren Sie die Fragen als Daten, rendern Sie sie in einer kleinen Client-Komponente, die Antworten und Score im React State verfolgt, berechnen Sie das Ergebnis beim Absenden und speichern Sie Responses in einer Datenbank wie Supabase, wenn Sie Leads erfassen möchten. Halten Sie die Seite selbst als Server-Komponente und pushen Sie nur den interaktiven Teil zum Client. Das ist die gesamte Architektur, und sie ist schneller und günstiger als ein Form-SaaS.
Kernaussage: Halten Sie die Seite als Server-Komponente, pushen Sie Interaktivität zu einer kleinen Client Island, speichern Sie Fragen als Daten, verfolgen Sie den Score im State und speichern Sie Ergebnisse und E-Mails in Supabase. Sie erhalten ein schnelles, einbettbares, Lead-erfassendes Quiz ohne Pro-Antwort-Gebühren.
Tools wie Typeform und Jotform sind großartig, bis Sie vollständiges Branding, keine Pro-Response-Limits und den Besitz der Daten und Leads wollen. Für ein Quiz, das zentral für Ihr Marketing ist, ist es meist besser, es selbst zu bauen. Hier ist, wie ich sie erstelle.
Warum es selbst bauen
Drei Gründe: Kontrolle, Kosten und Daten. Sie erhalten ein Quiz, das genau wie Ihre Marke aussieht, Sie vermeiden monatliche Response-Limits und Pro-Benutzer-Gebühren, und jede Antwort und E-Mail landen in Ihrer eigenen Datenbank, wo Sie Leads bewerten und Follow-ups auslösen können. Der Preis ist ein bis zwei Tage Build-Zeit statt Felder in einem SaaS zu ziehen.
Modellieren Sie die Fragen als Daten
Definieren Sie das Quiz als einfache Datenstruktur: ein Array von Fragen, jede mit Optionen und einem Score oder Outcome-Gewicht. Wenn Sie Fragen als Daten und nicht als Markup halten, können Sie diese hinzufügen, neu ordnen oder A/B-testen, ohne den Rendering-Code zu berühren, und können sie später in ein CMS oder eine Datenbank verschieben, wenn Nicht-Entwickler sie bearbeiten müssen.
Die Architektur: Server-Shell, Client-Island
Im App Router halten Sie die Route als Server-Komponente, die die Seiten-Shell, SEO-Tags und das erste Rendering liefert. Setzen Sie das interaktive Quiz in eine einzelne Client-Komponente (eine use-client-Island), die die aktuelle Frage, den laufenden Score und die Antworten im React-State hält. Das hält das JavaScript-Bundle klein und die Seite schnell, was wichtig ist, weil Quizze oft geteilt werden und Cold Traffic anziehen.
Erfassung des Ergebnisses und des Leads
Bei der Übermittlung berechnen Sie das Ergebnis aus dem Score, zeigen das Resultat an und schreiben die Antwort in die Datenbank. Mit Supabase fügen Sie die Antworten und, falls Sie das Ergebnis hinter einer E-Mail-Anfrage sperren, den Lead in einem Aufruf aus einer Server Action oder einem Route Handler ein. Jetzt ist das Quiz nicht nur Engagement; es ist eine Lead-Capture-Maschine, die Ihnen gehört, ohne Exportbeschränkungen.
Machbar für das Teilen
Geben Sie jedem Ergebnis eine stabile URL und ein dynamisches Open Graph-Bild, damit geteilte Links die Outcome-Vorschau zeigen. Ein Quiz, das eine teilbare Ergebnisseite erzeugt, ist sein eigener Verteilungskanal, was der gesamte Sinn von Marketing-Quizzen ist und das meiste, was Form-Tools schlecht machen.
Deployment und Performance
Rendern Sie die Shell statisch, führen Sie die kleine Client-Island am Edge oder Client aus, und das Quiz lädt überall schnell. Weil die schwere Arbeit aus Daten plus etwas State besteht, gibt es keinen Server zu skalieren und keine Pro-Response-Abrechnung, nur Ihr normales Hosting.
Wann man statt SaaS nutzt
Wenn du ein Quiz heute Nachmittag live brauchen oder nicht-technisches Personal regelmäßig Quizze erstellen und bearbeiten muss, ist ein Tool wie Tally oder Jotform die praktische Wahl. Baue es in Next.js, wenn das Quiz ein zentraler, markengebundener, hochfrequentierter Asset ist und dir die Kontrolle über die Daten und das Nutzererlebnis den Engineering-Aufwand wert ist.
FAQ
Brauche ich ein Backend, um ein Quiz in Next.js zu bauen?
Nicht für die Quiz-Logik, die im Client läuft. Du brauchst ein Backend nur, um Antworten zu speichern oder Leads zu erfassen, und eine gehostete Datenbank wie Supabase deckt das ab, ohne dass du einen eigenen Server betreibst.
Wie speichere ich Quiz-Antworten?
Schreibe sie beim Submit in eine Datenbank, über eine Next.js Server Action oder Route Handler. Supabase oder jede Postgres-Datenbank funktioniert; füge die Antworten und das berechnete Ergebnis ein, plus eine E-Mail, wenn du eine erfasst.
Wie generiere ich Leads aus einem Quiz?
Sperr das Ergebnis hinter einem E-Mail-Feld, dann speichere die E-Mail mit der Antwort. Weil du die Datenbank besitzt, gehört jeder Lead dir, um ihn zu bewerten und nachzufassen – ohne Export-Limits, die ein Form-SaaS dir aufzwingen könnte.
Next.js oder Typeform für ein Quiz?
Typeform für Geschwindigkeit und nicht-technische Bearbeitung; Next.js, wenn du vollständiges Branding, keine Gebühren pro Antwort, teilbare Ergebnisseiten und Dateneigentum möchtest. Bei einem zentralen Marketing-Quiz gewinnt der Next.js-Build meist. Wenn du es gebaut haben möchtest, genau das ist die Art von Dingen, die ich baue.
Verwandt: Typeform-Alternativen für die No-Code-Route und das Serverless-Datenbanken-Verzeichnis zum Speichern von Antworten.