Next.js - lesson 5 | HackIndia Skills

Key point

One idea

A route handler is a server endpoint made by adding route.ts inside the app folder. Use it when your browser UI, webhook, mobile client, or another service needs to call your app over HTTP.

Do not create an API route for every database read. In App Router, Server Components can fetch data directly on the server.

Where it fits

Your pages use page.tsx. Your layouts use layout.tsx. Your API endpoint uses route.ts.

The folder path becomes the URL. app/api/status/route.ts becomes /api/status. This is file-based routing, but for HTTP methods instead of screens.

Example

Simple GET route

Add this file to your project. It returns JSON that your judge, frontend, or phone browser can open.

// app/api/status/route.ts

export async function GET() {
  return Response.json({
    ok: true,
    app: "HackIndia demo",
    message: "API route is working",
  });
}

Your to-do

Test the route

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Start your dev server if it is not already running.
Open /api/status in your browser.
Check that you see JSON, not a page layout.
Change the message and refresh to confirm the file is connected.
Commit the new app/api/status/route.ts file to your repo.

0 of 5 done

Example

POST for form data

Use POST when the browser sends data to your server. This example accepts a team name for a hackathon project and returns a small response.

This does not save to a database yet. It proves that your app can receive JSON and respond from the server.

// app/api/teams/route.ts

type TeamRequest = {
  teamName?: string;
};

export async function POST(request: Request) {
  const body = (await request.json()) as TeamRequest;

  if (!body.teamName) {
    return Response.json(
      { error: "teamName is required" },
      { status: 400 }
    );
  }

  return Response.json({
    saved: true,
    teamName: body.teamName,
  });
}

Tip

Use AI carefully

You can ask ChatGPT, Gemini, or Claude to write a route.ts for your exact use case. Give it your folder path, method, expected request body, and expected response.

Check three things in the answer: it exports GET or POST by name, it uses Request and Response APIs, and it does not put secret keys in client code.

Common mistake

Beginners often fetch their own API route from a Server Component just to read server data. That adds an extra HTTP hop inside the same app.

If only a page needs the data, fetch it directly in the Server Component. If a Client Component, form, webhook, or external app needs an endpoint, use route.ts.