JSON response

Learn to return JSON with NextResponse.

JSON response

API routes most often return JSON. NextResponse.json() converts an object to JSON and adds the Content-Type: application/json header.

On the client, you call fetch('/api/items') and parse with await r.json(). Returning a proper status code on errors matters.

For example, on a validation error return NextResponse.json({ error: "..." }, { status: 400 }).

Error handling

Error handling in API routes uses try/catch. The try block does the work; if an error throws, catch catches it and returns a proper status code.

Expected errors (e.g. missing field) use 400, server errors 500. The client acts based on the code.

Error messages must be user-appropriate; sensitive info must not leak.

Exercise Error-handling GET

Write a GET function: in a try block return NextResponse.json({ items: [1, 2, 3] }), in catch (e) return NextResponse.json({ error: "Server error" }, { status: 500 }). Include import { NextResponse } from "next/server" and export async function GET().

Show example solution

// app/api/items/route.js
import { NextResponse } from "next/server";

export async function GET() {
  try {
    return NextResponse.json({ items: [1, 2, 3] });
  } catch (e) {
    return NextResponse.json({ error: "Server error" }, { status: 500 });
  }
}

Test yourself

Which status for a bad request?
- 400
- 200
- 100
- 500
Show answer

400 — 400 (Bad Request).

try catch

try {
  const data = await request.json();
  return NextResponse.json({ ok: true });
} ____ (e) {
  return NextResponse.json({ error: "Hata" }, { status: 500 });
}

Show answer

try {
  const data = await request.json();
  return NextResponse.json({ ok: true });
} catch (e) {
  return NextResponse.json({ error: "Hata" }, { status: 500 });
}

JSON response: match the terms

200

OK
201

Created
400

Bad request
500

Server error

Next lesson: Summary - API routes

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies