To build a quiz app with Next.js in 2026, model the questions as data, render them in a small client component that tracks answers and score in React state, compute the result on submit, and persist responses to a database like 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.
Key takeaway: 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 like Typeform and Jotform are great until you want full branding, no per-response limits, and to own the data and the leads. For a quiz that is core to your marketing, building it yourself is usually the better call. Here is how I build them.
Why build it yourself
Three reasons: control, cost, and data. You get a quiz that looks exactly like your brand, you avoid monthly response caps and per-seat fees, and every answer and email lands in your own database where you can score leads and trigger follow-up. The trade is a day or two of build time versus dragging fields in a SaaS.
Model the questions as data
Define the quiz as a plain data structure: an array of questions, each with options and a score or outcome weight. Keeping questions as data, not markup, means you can add, reorder, or A/B test them without touching the rendering code, and you can later move them into a CMS or database if non-developers need to edit them.
The architecture: server shell, client island
In the 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.
Capturing the result and the lead
On submit, compute the outcome from the score, show the result, and write the response to the database. With Supabase you insert the answers and, if you gate the result behind an email, the lead, in one call from a server action or route handler. Now the quiz is not just engagement; it is a lead-capture machine you own, with no export limits.
Making it shareable
Give each result a stable URL and a 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.
Deploy and performance
Static-render the shell, run the small client island on the edge or client, and the quiz loads fast anywhere. Because the heavy lifting is data plus a little state, there is no server to scale and no per-response bill, just your normal hosting.
When to use a SaaS instead
If you need a quiz live this afternoon, or non-technical staff must build and edit quizzes regularly, a tool like Tally or Jotform is the pragmatic choice. Build it in Next.js when the quiz is a core, branded, high-traffic asset and owning the data and experience is worth the engineering.
FAQ
Do I need a backend to build a quiz in Next.js?
Not for the quiz logic, which runs in the client. You only need a backend to store responses or capture leads, and a hosted database like Supabase covers that without running your own server.
How do I store quiz responses?
Write them to a database on submit, via a Next.js server action or route handler. Supabase or any Postgres works; insert the answers and computed result, plus an email if you collect one.
How do I capture leads from a quiz?
Gate the result behind an email field, then store the email with the response. Because you own the database, every lead is yours to score and follow up, with no export caps a form SaaS might impose.
Next.js or Typeform for a quiz?
Typeform for speed and non-technical editing; Next.js when you want full branding, no per-response fees, shareable result pages, and to own the data. For a core marketing quiz, the Next.js build usually wins. If you want it built, that is exactly the kind of thing I build.
Related: Typeform alternatives for the no-code route, and the serverless databases directory for where to store responses.