Challenge: Next.js API

Write an API route that returns products with GET and adds with POST.

Challenge: Next.js API

In this challenge you will write a Next.js App Router route handler. In app/api/items/route.js you define GET and POST functions.

GET returns a JSON array; POST reads the request body and responds with NextResponse.json at status 201. Remember to export.

Exercise Write the API route handler

Write app/api/items/route.js. Import NextResponse. In export async function GET() return NextResponse.json([{ id: 1 }]). In export async function POST(request) read the body with request.json() and respond with NextResponse.json(body, { status: 201 }).

Show example solution

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json([{ id: 1 }]);
}

export async function POST(request) {
  const body = await request.json();
  return NextResponse.json(body, { status: 201 });
}

Test yourself

Where does an App Router route handler live?
- app/api/items/route.js
- app/api/route.js
- pages/api/items.js
- server.js
Show answer

app/api/items/route.js — In App Router the route is defined in route.js.

Fill in the blank: respond with status 201

import { NextResponse } from 'next/server';

export async function POST(request) {
  const body = await request.json();
  return NextResponse.json(body, { status: ____ });
}

Show answer

import { NextResponse } from 'next/server';

export async function POST(request) {
  const body = await request.json();
  return NextResponse.json(body, { status: 201 });
}

Next lesson: Challenge: Zustand store

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies