Data Fetching

API Routes

Build backend API endpoints directly in your Next.js app using Route Handlers.

Route Handlers

In the App Router, API endpoints are created with route.ts files. They export named functions for each HTTP method: GET, POST, PUT, DELETE, etc.

Request and Response

Route handlers receive a Web Request object and should return a Response. Use Next.js's NextRequest and NextResponse for additional helpers.

Use Cases

  • Form submissions
  • Webhooks
  • Authentication
  • Third-party API proxying (keeps API keys server-side)

Example

typescript
// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';

// GET /api/users
export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const query = searchParams.get('q');

  const users = await db.users.findAll({
    where: query ? { name: { contains: query } } : {},
  });

  return NextResponse.json(users);
}

// POST /api/users
export async function POST(request: NextRequest) {
  const body = await request.json();
  const { name, email } = body;

  if (!name || !email) {
    return NextResponse.json(
      { error: 'Name and email are required' },
      { status: 400 }
    );
  }

  const user = await db.users.create({ name, email });
  return NextResponse.json(user, { status: 201 });
}

// app/api/users/[id]/route.ts
export async function DELETE(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  await db.users.delete({ where: { id: params.id } });
  return new Response(null, { status: 204 });
}
Try it yourself — TYPESCRIPT