How I Built a Form Builder with Next.js 16 and Supabase

Three weeks ago I built a form builder. Not a company — just a tool I needed.

Here are the three bugs that cost me the most time.

Bug #1 — React state closure

Typing in the question editor did nothing. The letters didn't appear.

Cause: I was mapping over state directly instead of using the functional update form.

typescript
// ❌ Broken
setBlocks(blocks.map((b) => b.id === id ? { ...b, label } : b));

// ✅ Correct
setBlocks((prev) => prev.map((b) => b.id === id ? { ...b, label } : b));

Comments

[Elijah Brown]

The functional-update bug gets everyone once. Since the forms are public, do submissions get checked on the server as well as in the builder? Email and phone fields are where most junk arrives, and a check in the submit route (format, plus whether the email's domain resolves) keeps it out of your users' dashboards without adding anything to the form itself.