Skip to content
tezvyn:
Menu

How do you read headers and search params in a Route Handler?

Source: nextjs.orgMediumHow cards are made

Tests fluency with the Web Standard Request API in Next.js App Router. A strong answer uses request.headers.get() for headers and request.nextUrl.searchParams for query params, avoiding Express-style req.query or req.headers.authorization.

What's really being asked

This question evaluates whether you understand that Next.js App Router Route Handlers are built on Web Standard APIs rather than Node.js or Express conventions. The interviewer wants to see that you know how to extract metadata from the incoming Request object, specifically using the Headers API for request headers and the URL API for search parameters, and that you can distinguish between server-side Route Handler patterns and client-side hook patterns.

The full answer

First, state that a Route Handler receives a Request object, or more specifically a NextRequest instance, as its first argument. Second, for headers such as Authorization, demonstrate request.headers.get('authorization') and note that the Headers API is case-insensitive so the casing does not matter. Third, for URL search parameters, show request.nextUrl.searchParams.get('key') and explain that NextRequest provides a nextUrl property containing a pre-parsed URL object, though you could also use new URL(request.url).searchParams as a fallback. Fourth, explicitly contrast this with Express-style patterns like req.headers.authorization or req.query to show you understand the paradigm shift in the App Router. Fifth, mention that dynamic route segments are accessed via the second params argument, not the request object, to demonstrate broader Route Handler fluency.

The mistakes people make

Using Express idioms like req.query for search params or req.headers['authorization'] for headers. Attempting to import useSearchParams from next/navigation, which is a client hook and unavailable in a server Route Handler. Treating headers() from next/headers as the primary or only way to read headers, when that helper is designed for Server Components and async server contexts; in Route Handlers the request object is the idiomatic source. Failing to mention that the Headers API uses get() rather than direct property access, which signals unfamiliarity with the Web Standard Request model.

What usually comes next

How does NextRequest differ from the standard Web Request object? How would you read dynamic route segments in the same file? How do you return JSON or handle CORS preflight requests in a Route Handler? What is the difference between Route Handlers and API Routes in the Pages Router?

A concrete example

In an app/api/items/route.js file, an export async function GET(request) handler reads a bearer token via const auth = request.headers.get('authorization') and filters a database query by category using const category = request.nextUrl.searchParams.get('category'). The handler returns Response.json({ items }) using the standard Web Response API.

Interview question

In a Next.js App Router GET Route Handler, which pair correctly reads the Authorization header and a category search parameter?

  • a.headers().get('authorization') and useSearchParams().get('category')
  • b.request.headers.authorization and request.query.category
  • c.request.headers.get('authorization') and request.url.searchParams.get('category')
  • d.request.headers.get('authorization') and request.nextUrl.searchParams.get('category')Correct
Why?

Option D correctly uses the Web Standard Headers API and NextRequest's pre-parsed nextUrl. Option B is tempting but wrong because Express-style patterns like direct property access on headers and request.query do not exist on the standard Request object.

Just read this? Test yourself on what you have been reading.

Read the original → nextjs.org

Put your scrolling time to good use

Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.

See open roles