How to Build a Contact Form in Next.js (Without Building a Backend)

Every Next.js project eventually needs a contact form. And the first instinct is usually: “I’ll just create an API route and send an email.” That works. But it’s also a whole project on its own. You need to: pick an email provider manage API keys deal with spam handle failures store submissions somewhere All before you've written a single line of your actual product. There’s a simpler way. The options, quickly When you search “Next.js contact form”, you’ll usually see three approaches: Route Handler + email API (Resend, SendGrid, etc.) Full control, but you own everything. Server Actions Cleaner DX, but you still handle email + spam yourself. Form backend service Send data to a hosted endpoint. It handles storage + email. For most projects, especially landing pages, SaaS sites, and static apps, option 3 is the fastest path. This guide walks through that approach. The simplest version: HTML only If you don’t need loading states or interactivity, you can use a plain HTML form with no Jav