API Routes (Route Handlers)

A file named route.ts (instead of page.tsx) in any app/ folder becomes a real backend HTTP endpoint — no separate server (Express, etc.) required. This is what makes Next.js a full-stack framework rather than just a frontend one.

Explain it like I'm 5

In ReactNotes, calling an API meant fetching some URL that lives on a completely separate server you have to run yourself. In Next.js, you can write that server endpoint as a normal file right inside your project — the frontend and the backend ship together, deploy together, and share the same TypeScript types.

1. app/api/hello/route.ts

Exporting a function named after an HTTP verb (GET, POST, PUT, DELETE...) handles that verb for this URL. context.params (not used here) would be a Promise, same as in a page.

app/api/hello/route.ts

import { NextRequest } from 'next/server'

export async function GET(request: NextRequest) {
  const name = request.nextUrl.searchParams.get('name') ?? 'world'
  return Response.json({ message: `Hello, ${name}!` })
}

export async function POST(request: NextRequest) {
  const body = await request.json()
  return Response.json({ message: `Hello via POST, ${body.name}!` })
}

2. Calling it from the browser

This form calls the actual /api/hello endpoint running in this project with plain fetch(), exactly like calling any external API.

Live result