Building and Managing API Routes in Next.js

API Routes in Next.js allow you to create backend endpoints directly inside your application using the App Router. They enable you to handle HTTP requests, process data, and return JSON responses without setting up a separate backend server.

• Create backend API endpoints directly inside a Next.js application.
• Handle different HTTP methods such as GET and POST.
• Return JSON responses using NextResponse.
• Organize API routes using the App Router.

Working of API Routes in Next.js

In the App Router, API routes are created inside the src/app/api directory. Each folder represents an API endpoint, and a route.js file defines the HTTP methods such as GET and POST. When a request is sent to an API route, Next.js automatically executes the corresponding function and returns the response.

Steps to Build and Manage API Routes in Next.js

Step 1: Create a new Next.js application using the following commands.

npx create-next-app@latest my-next-app
cd my-next-app

Project Structure:

Step 2: Create Your First API Route

Create an api folder inside the src/app directory. Inside the api folder, create another folder named hello, and then add a route.js file.

// Filename - src/app/api/hello/route.js
import { NextResponse } from "next/server";
export async function GET() {
  return NextResponse.json({
    message: "Welcome to GeeksforGeeks!",
  });
}

This API route handles GET requests and returns a JSON response.

Step 3: Handle POST Requests

Open the src/app/api/hello/route.js file and update it with the following code.

// Filename - src/app/api/hello/route.js
import { NextResponse } from "next/server";
export async function GET() {
  return NextResponse.json({
    message: "Welcome to GeeksforGeeks!",
  });
}
export async function POST(request) {
  const body = await request.json();
  return NextResponse.json({
    message: `Hello ${body.name}`,
  });
}

The POST() function reads the request body using request.json() and returns a JSON response.

Step 4: Manage Multiple API Routes

As your application grows, creating all API endpoints inside a single route is not a good practice. Instead, organize related API routes into separate folders inside the api directory. This keeps the project clean and makes the API easier to maintain.

Create a users folder inside the src/app/api directory and add a route.js file.

Open the src/app/api/users/route.js file and add the following code.

// Filename - src/app/api/users/route.js
import { NextResponse } from "next/server";
export async function GET() {
  return NextResponse.json([
    {
      id: 1,
      name: "John",
    },
    {
      id: 2,
      name: "Alice",
    },
  ]);
}

Step 5: Run the development server using the following command.

npm run dev

Output: