Why API routes serve backend logic in NextJS - Visual Breakdown

Concept Flow - Why API routes serve backend logic

Client sends HTTP request

↓

Next.js API Route receives request

↓

Backend logic runs (DB, auth, calculations)

↓

API Route sends response back

↓

Client receives data or confirmation

This flow shows how a client request goes to a Next.js API route, which runs backend code and sends back a response.

Execution Sample

NextJS

export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'Hello from backend!' });
  }
}

This API route responds to GET requests with a JSON message from backend logic.

Execution Table

Step	Action	Request Method	Backend Logic	Response Sent
1	Receive request	GET	Check method	No response yet
2	Check method	GET	Matches GET branch	No response yet
3	Send response	GET	Prepare JSON message	200 OK with { message: 'Hello from backend!' }
4	End	No new request	No logic	Response sent, connection closed

💡 Request handled and response sent, no further action.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
req.method	undefined	GET	GET	GET	GET
res.statusCode	undefined	undefined	undefined	200	200
res.body	undefined	undefined	undefined	{"message":"Hello from backend!"}	{"message":"Hello from backend!"}

Key Moments - 2 Insights

Why does the API route check req.method before responding?

Because the API route can handle different HTTP methods (GET, POST, etc.), it checks req.method to run the correct backend logic. See execution_table step 2 where it matches 'GET'.

Is the API route code running on the client or server?

It runs on the server. The client sends a request, and the API route runs backend logic before sending a response, as shown in the concept_flow.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the response sent?

A 200 OK with JSON message

B 404 Not Found

C 500 Internal Server Error

D No response sent yet

💡 Hint

Check the 'Response Sent' column at step 3 in execution_table.

At which step does the API route check the HTTP method?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Backend Logic' column in execution_table to find where method is checked.

If the request method was POST instead of GET, what would happen in this code?

A The API route would send the same JSON response

B The API route would do nothing and no response sent

C The API route would not match GET branch and send no response

D The API route would throw an error

💡 Hint

Refer to the code and execution_table step 2 where only GET is handled.

Concept Snapshot

Next.js API routes handle backend logic by receiving HTTP requests.
They check the request method (GET, POST, etc.) to decide what to do.
Backend code runs on the server inside the API route function.
The route sends back a response (JSON, status) to the client.
This lets frontend and backend live together in one app.

Full Transcript

In Next.js, API routes serve backend logic by acting as server-side functions that respond to HTTP requests. When a client sends a request, the API route receives it and checks the HTTP method, like GET or POST. Based on the method, it runs backend code such as fetching data or processing input. Then it sends a response back to the client, often JSON data. This flow allows backend logic to live inside the Next.js app, separate from frontend UI code. The example code shows a GET request handler that returns a JSON message. The execution table traces each step: receiving the request, checking the method, preparing the response, and sending it. Variables like req.method and res.statusCode change as the code runs. Beginners often wonder why method checking is needed and where the code runs; it runs on the server and method checking directs the logic. The visual quiz tests understanding of these steps and outcomes.