Type dynamic segment parameters
A Route Handler serves a dynamic resource such as /users/123.
Next.js 16+ · Type Alias
RouteContext
RouteContext is a globally available TypeScript helper for Route Handlers. It derives strongly typed params from a route-pattern literal such as '/users/[id]'.
How it works
RouteContext is a globally available TypeScript helper for Route Handlers. Give it a route literal such as '/users/[id]' and the context parameter gains a route-specific params type; read params asynchronously before constructing the response.
Syntax
RouteContext<'/route-pattern'>Parameters
| Name | Type | Description |
|---|---|---|
route | string literal | A route-pattern string literal used to derive the handler's parameter types. |
ctx | RouteContext<route> | The Route Handler context typed with RouteContext for the route pattern. |
Returns
No standalone runtime value; RouteContext supplies the compile-time type of a Route Handler context.
Key points
- Use RouteContext with a route literal to derive strongly typed Route Handler params.
- RouteContext is global after generation, so a TypeScript import is unnecessary.
- Next.js generates the route-aware types in development, production builds, or explicit type generation.
- A handler can declare its context as RouteContext for the matching dynamic route.
- Dynamic parameters are accessed by awaiting the context's params property.
Common mistakes
- The helper is unavailable until Next.js generates route types through development, a build, or
next typegen. - Do not import RouteContext; it becomes a global helper after type generation.
Example: Typed dynamic route handler
export async function GET(
_request: Request,
context: RouteContext<'/users/[id]'>
) {
const { id } = await context.params
return Response.json({ id })
}A dynamic route handler receives strongly typed params through the globally available helper.
When to use it
Type catch-all route parameters
A handler processes nested documentation or file paths.
Avoid duplicated params types
A project wants route-derived types without maintaining manual parameter interfaces.
Interview questions
QWhat problem does RouteContext solve?
RouteContext types a Route Handler's context parameter from a route literal. For '/users/[id]', it provides a params type containing id, and params must be awaited.
Follow-up: How would you type a catch-all route? Use a literal such as '/docs/md/[...slug]'; the generated params type reflects the catch-all segment.
QWhen is RouteContext available?
It is globally available after route type generation, so no import is required. Generation runs during next dev, next build, or next typegen.
Follow-up: What happens in a fresh checkout before generation? Run next typegen, next dev, or next build so the global helper is produced.
QHow do you apply RouteContext to a dynamic route?
Pass the exact App Router route pattern as its generic argument, then accept RouteContext<that pattern> as the handler context. Await context.params to access dynamic values.
Follow-up: Why use the route pattern instead of a hand-written params object? The route literal lets Next.js derive parameter names and shapes from the route structure.
Related
Route HandlersPagePropsLayoutPropsnext typegendynamic segments