Building a REST API Step-by-Step

This post uses Code Hike's carouselcoding layout to walk through building a Next.js API route incrementally. Scroll through each step on the left and watch the code evolve on the right.

The Basic Handler

We start with the simplest possible API route. Next.js App Router uses the route.ts convention with named exports for each HTTP method.

The GET handler returns a basic JSON response with a 200 status.

Adding a Data Source

Now we introduce a simple in-memory data store. In a real application this would be a database query, but the pattern is the same.

We define a User type and populate the array with sample data.

Input Validation

Next we add a POST handler for creating users. We parse the request body and validate the required fields before proceeding.

If validation fails, we return a 400 error with a descriptive message.

Error Handling

Finally, we wrap everything in proper error handling. The try/catch around request.json() catches malformed JSON, and we add a generic catch for unexpected errors.

This gives callers clear feedback no matter what goes wrong.

api/users/route.ts

import { NextResponse } from "next/server";

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

This post uses Code Hike's carouselcoding layout to walk through building a Next.js API route incrementally. Scroll through each step on the left and watch the code evolve on the right.