Route handlers (route.ts) in NextJS - Step-by-Step Execution

Concept Flow - Route handlers (route.ts)

Incoming HTTP Request

↓

Match URL & Method

↓

Call Route Handler Function

↓

Process Request Data

↓

Generate Response

↓

Send Response to Client

This flow shows how Next.js route handlers receive a request, process it, and send back a response.

Execution Sample

NextJS

import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  return NextResponse.json({ message: 'Hello from GET' });
}

A simple GET route handler that responds with a JSON message.

Execution Table

Step	Action	Input	Output	Notes
1	Receive HTTP GET request	/api/hello	Request object created	Request arrives at route.ts
2	Match route and method	GET /api/hello	Calls GET handler	Route handler function selected
3	Execute GET handler	Request object	NextResponse with JSON {message: 'Hello from GET'}	Handler processes request
4	Send response	NextResponse	HTTP 200 with JSON body	Response sent to client
5	End	-	-	Request cycle complete

💡 Request handled and response sent, no further processing.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
request	undefined	Request object with URL /api/hello	Same Request object	Same Request object
response	undefined	undefined	NextResponse with JSON body	NextResponse sent

Key Moments - 2 Insights

Why does the GET function receive a Request object?

Because in step 2 and 3 of the execution_table, the incoming HTTP request is wrapped as a Request object and passed to the GET handler to access details like URL and headers.

What happens if the route handler does not return a response?

If no response is returned, the request will hang or cause an error. The execution_table shows that the handler must return a NextResponse to complete the cycle.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output of step 3?

A NextResponse with JSON {message: 'Hello from GET'}

B Request object with URL /api/hello

C HTTP 404 Not Found

D Undefined

💡 Hint

Check the Output column in step 3 of the execution_table.

At which step is the route handler function selected?

A Step 1

B Step 2

C Step 4

D Step 5

💡 Hint

Look at the Action column in the execution_table for when the handler is called.

If the GET handler returned a plain string instead of NextResponse, what would change in the execution_table?

A Step 3 Output would be the string instead of NextResponse

B Step 2 would change to POST handler

C Step 4 would be skipped

D Step 1 would not receive a request

💡 Hint

Focus on the Output column in step 3 where the handler's return value is shown.

Concept Snapshot

Route handlers in Next.js (route.ts) receive HTTP requests as Request objects.
They match URL and method, then run the corresponding async function (GET, POST, etc).
Handlers return NextResponse objects to send HTTP responses.
This flow ensures clear request processing and response sending.
Always return a response to complete the request cycle.

Full Transcript

In Next.js, route handlers are functions defined in route.ts files that respond to HTTP requests. When a request arrives, Next.js matches the URL and HTTP method to the correct handler function, such as GET or POST. The handler receives a Request object containing details about the request. It processes this data and returns a NextResponse object, which Next.js sends back to the client as the HTTP response. This process ensures each request is handled clearly and efficiently. If a handler does not return a response, the request will not complete properly. This visual trace shows each step from receiving the request to sending the response.