Sending and Receiving Data with Route Handlers

Now that you understand how Route Handlers work, let's connect them with your frontend.

In real applications, users submit data through forms, and your app needs to send that data to the server and process it.

In Next.js, this is done by sending a request from a Client Component to a Route Handler.

Example - Sending Data from a Form

"use client";

import { useState } from "react";

export default function ContactForm() {
  const [name, setName] = useState("");

  async function handleSubmit(e) {
    e.preventDefault();

    await fetch("/api/contact", {
      method: "POST",
      body: JSON.stringify({ name }),
      headers: {
        "Content-Type": "application/json",
      },
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

This form sends data to the server when submitted.

Receiving Data in a Route Handler

export async function POST(request: Request) {
  const data = await request.json();

  return Response.json({
    message: "Received",
    data,
  });
}

This handler receives the data and returns a response.

How It Works

When the form is submitted:

1. The browser sends a POST request to /api/contact;
2. The Route Handler processes the request;
3. The server returns a response;
4. The client can use this response if needed.

Using the Response

You can also handle the response in your component:

const res = await fetch("/api/contact", {
  method: "POST",
  body: JSON.stringify({ name }),
  headers: {
    "Content-Type": "application/json",
  },
});

const result = await res.json();
console.log(result);