Dynamic API routes in NextJS - Step-by-Step Execution

Concept Flow - Dynamic API routes

Request comes in

↓

Check URL path

↓

Match dynamic route pattern

↓

Extract dynamic params

↓

Run API handler with params

↓

Send response back

When a request hits the API, Next.js matches the URL to a dynamic route file, extracts parameters, runs the handler, and returns the response.

Execution Sample

NextJS

export default function handler(req, res) {
  const { id } = req.query;
  res.status(200).json({ message: `Item ID is ${id}` });
}

This API route returns a JSON message showing the dynamic id from the URL.

Execution Table

Step	Request URL	Route Matched	Extracted Params	Handler Action	Response Sent
1	/api/items/42	/api/items/[id].js	{ id: '42' }	Return JSON { message: 'Item ID is 42' }	200 OK with JSON
2	/api/items/abc	/api/items/[id].js	{ id: 'abc' }	Return JSON { message: 'Item ID is abc' }	200 OK with JSON
3	/api/items	No match	{}	No handler run	404 Not Found

💡 Execution stops when no matching dynamic route is found or response is sent.

Variable Tracker

Variable	Start	After 1	After 2	After 3
req.query.id	undefined	42	abc	undefined
res.statusCode	200	200	200	404
response JSON message	undefined	Item ID is 42	Item ID is abc	undefined

Key Moments - 2 Insights

Why does the handler receive the id as a string even if it looks like a number?

Because URL parameters are always strings. See execution_table rows 1 and 2 where id is '42' and 'abc' as strings.

What happens if the URL does not match any dynamic route?

No handler runs and Next.js returns a 404 error, as shown in execution_table row 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the extracted param when the request URL is '/api/items/abc'?

A { id: 123 }

B {}

C { id: 'abc' }

D { item: 'abc' }

💡 Hint

Check execution_table row 2 under Extracted Params column.

At which step does the response status code become 404?

A Step 3

B Step 2

C Step 1

D Never

💡 Hint

Look at execution_table row 3 under Response Sent column.

If the URL was '/api/items/100', what would the response JSON message be?

A "Item ID is id"

B "Item ID is 100"

C "Item ID is undefined"

D "Item ID is null"

💡 Hint

Refer to execution_table rows 1 and 2 for response JSON message pattern.

Concept Snapshot

Dynamic API routes in Next.js use filenames with brackets like [id].js
The id part is extracted from the URL as a string
The handler receives params in req.query
Handler returns response using res object
If no route matches, Next.js returns 404
Useful for APIs needing variable input in URL

Full Transcript

Dynamic API routes in Next.js let you create API endpoints that change based on the URL. For example, a file named [id].js inside the api folder matches URLs like /api/items/42 or /api/items/abc. When a request comes in, Next.js checks the URL, matches it to the dynamic route, extracts the id parameter as a string, and passes it to the handler function in req.query. The handler then uses this id to create a response, often JSON. If the URL does not match any route, Next.js returns a 404 error. This lets you build flexible APIs that respond differently depending on the URL path.