Route Handlers (API Endpoints)

Your backend lives in the same project

A normal React app needs a separate backend server for things like saving data or hiding API keys. Next.js bundles a backend in: a file named route.js (instead of page.js) becomes an API endpoint — a URL that returns data, not a page. (API = Application Programming Interface, a way for programs to talk to each other. The data is usually sent as JSON — JavaScript Object Notation, a simple text format for data that looks just like a JavaScript object.)

A GET endpoint

Inside route.js you export a function named after the HTTP method, like GET. Return data with Response.json(...) and it is sent as JSON.

// app/api/products/route.js
export async function GET() {
  const products = [
    { id: 1, name: 'Keyboard', price: 999 },
    { id: 2, name: 'Mouse', price: 499 },
  ];
  return Response.json(products);
}

The request-response flow, step by step

Every API call follows the same simple round trip: a request goes out (someone asks for data) and a response comes back (your server answers). Here is exactly what happens when something visits /api/products:

1. A client (a browser tab, a phone app, or another server) sends an HTTP request to /api/products. Because it is just opening a URL, that is a GET request.
2. Next.js sees the request is a GET and runs the GET function you exported in route.js.
3. Your function builds the products array — in a real app this is where you would read from a database.
4. You call Response.json(products), which packs the array into a JSON response.
5. Next.js sends that response back to the client. The client now has the data and can show it, save it, or do anything it likes with it.

Handling other methods

Export POST, PUT or DELETE in the same file to handle those requests — for example, to create a new product when the browser sends a POST.

// app/api/products/route.js
export async function POST(request) {
  const body = await request.json();   // data the client sent
  // ...save body to a database here...
  return Response.json({ created: body }, { status: 201 });
}