The Easiest Way to Add Forms to a Next.js App Without Backend Needed

Adding forms to your Next.js app doesn’t have to mean spinning up a server, managing a database, or writing backend logic. In fact, you can handle form submissions in Next.js without a server at all—especially for simple use cases like contact forms, feedback forms, or newsletter signups.

In this post, we’ll explore the easiest ways to add forms to your Next.js app using a form API backend like DevMatter, and when you might want to use a server route for more control.

Common Ways to Handle Forms in Next.js

When it comes to handling forms in Next.js, there are a few typical approaches:

1. Use a Full Backend

You can create an API route (/pages/api/submit.js) that processes the form, writes to a database, sends emails, etc.

• ✅ Pros: Full control
• ❌ Cons: More setup, deployment complexity, requires server functions or edge functions

2. Use a Headless Form Backend

If you don’t want to manage a server, a form API backend like DevMatter handles submissions for you. Just send the form data to your DevMatter endpoint using a POST request from the frontend

• ✅ Pros: No server required, works with static sites, easy setup
• ❌ Cons: Less flexibility (but still powerful enough for most use cases)

When to Use Which

How to Add a Form Without a Backend

Let’s walk through adding a simple contact form that submits directly to DevMatter—no server code needed.

Step 1: Create a DevMatter Form

Create a form in your DevMatter dashboard. You’ll get a unique form endpoint URL, e.g.

Step 2: Add the HTML Form

Here’s a simple form that sends data directly to the API:

// components/ContactForm.js
'use client'

export default function ContactForm() {
  async function handleSubmit(e) {
    e.preventDefault()
    const formData = new FormData(e.target)

    await fetch('https://api.devmatter.app/forms/abc123/submit', {
      method: 'POST',
      body: formData,
    })

    alert('Form submitted!')
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Your Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Your Message" required />
      <button type="submit">Send</button>
    </form>
  )
}

• ✅ Works even in a static export
• ✅ No /api route required
• ✅ Fully secure if the form is public

What About Authenticated Forms?

If your form requires authentication—for example, submitting internal feedback or editing user data—you’ll want to verify the user before calling the form API.

Here's how to do it:

Option 1: Use Next.js API Routes

You can create a simple API route like this:

// pages/api/secure-submit.js
export default async function handler(req, res) {
  const session = await getSession({ req }) // example using next-auth
  if (!session) {
    return res.status(401).json({ message: 'Unauthorized' })
  }

  // Forward data to DevMatter
  const response = await fetch('https://api.devmatter.app/forms/abc123/submit', {
    method: 'POST',
    body: req.body,
    headers: {
      'Content-Type': 'application/json',
    },
  })

  res.status(response.status).end()
}

Your frontend form would then submit to /api/secure-submit.

Option 2: Any other server-side setup

If you don't want to use Next.js API Routes, you can use any other server-side setup that supports POST requests. It could be a simple Node.js server running Express.js or a more robust solution like Firebase Functions.

Final Thoughts

If you’re building a modern Next.js app and just want a simple way to collect form submissions—without worrying about servers, validation, or email logic—a form API backend like DevMatter is the easiest and fastest way to go.

You can:

• Add forms directly in your frontend
• Skip writing API routes
• Handle both simple and advanced use cases
• Easily scale without changing your app architecture

Try it now → DevMatter— the form backend that gives you full control over the UI, but takes care of everything else.