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.Supabase if you want to capture leads. Keep the page itself a server component and push only the interactive part to the client. That is the whole architecture, and it is faster and cheaper than a 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.Keep the page a server component, push interactivity to a small client island, store questions as data, track score in state, and persist results and emails to Supabase. You get a fast, embeddable, lead-capturing quiz with no per-response fees.
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.App Router, keep the route a server component that renders the page shell, SEO tags, and the first paint. Put the interactive quiz in a single client component (a use-client island) that holds the current question, the running score, and the answers in React state. This keeps the JavaScript bundle small and the page fast, which matters because quizzes are often shared and land cold traffic.
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.server action or route handler. Now the quiz is not just engagement; it is a lead-capture machine you own, with no export limits.
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.dynamic Open Graph image so shared links preview the outcome. A quiz that produces a shareable result page is its own distribution channel, which is the entire point of marketing quizzes and something most form tools do poorly.
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.exactly the kind of thing I build.
Verwandt: Typeform-Alternativen für die No-Code-Route und das Serverless-Datenbanken-Verzeichnis zum Speichern von Antworten.Typeform alternatives for the no-code route, and the serverless databases directory for where to store responses.