Next.js static export with contact forms that actually work
Use output: export for a fully static Next.js site on Cloudflare or Netlify. Add Reachase for contact forms without API routes or a Node server in production.
Maya Okonkwo · Engineering
Next.js is a common choice for landing pages, but the default deployment model includes a Node server. API routes, server actions, and dynamic rendering all assume something is running after deploy.
For a marketing site, static export is often enough. You get React components, file-based routing, and optimized assets. Your output is plain HTML and JavaScript you can host on Cloudflare Pages for free.
The static export constraint
With output: export, API routes and server components that fetch at request time are off the table. That is usually fine for landing pages. The one feature that still needs a server-side endpoint is the contact form.
Reachase fills that gap. Paste an iframe embed on your contact page. Submissions post to Reachase servers. No API route in your Next.js app. No server in production.
Integration steps
Create your Next.js project with static export enabled. Build your contact page with the Reachase embed snippet in a client component or raw script tag. Run next build and deploy the out directory to any static host.
- Embed is hydration-safe and does not cause layout shift.
- Works with App Router and Pages Router.
- Theme tokens sync with light and dark mode on your site.
- Submissions appear in the Reachase dashboard immediately.
When to keep the Node server
If your Next.js app is a full product with auth, dashboards, and server-side data fetching, keep SSR. Use Reachase only for marketing pages or embed contact forms on public routes.
If your Next.js app is a landing page and a contact form, static export plus Reachase is the simpler path. Faster builds, cheaper hosting, and fewer things that break at 2 a.m.