Type route parameters
A page has dynamic segments such as /blog/[slug].
Next.js 16+ · Type Alias
PageProps
PageProps is a global TypeScript helper that derives a page's params and searchParams types from a route literal. It supports type-safe App Router pages, including dynamic segments.
How it works
PageProps is a globally available TypeScript helper for page components. Give it a route literal to derive the page's params and searchParams types, then await those properties inside an async page.
Syntax
PageProps<'/route'>Parameters
| Name | Type | Description |
|---|---|---|
route | string literal | A route literal such as /blog/[slug]; it determines the generated params keys and page route typing. |
Returns
A globally available helper type for page props, including typed params and searchParams.
Key points
- Apply PageProps to a page's props to derive strongly typed route parameters and query parameters from the route pattern.
- No import is required once Next.js has generated the global helper declaration.
- The helper is intended for App Router page components rather than manually declared prop interfaces.
- A dynamic route literal makes each named segment available through params with checked property names.
- Query-string values are accessed through the page's typed searchParams property.
Common mistakes
- The helper is available only after Next.js generates the route types; run the development server, build, or type-generation command when needed.
- Use a literal route rather than a broad or dynamically constructed string to retain autocomplete and strict parameter keys.
Example: Typed dynamic page
export default async function Page(props: PageProps<'/blog/[slug]'>) {
const { slug } = await props.params
const query = await props.searchParams
return <h1>{slug}: {query.q ?? 'all posts'}</h1>
}A typed dynamic page awaits both generated request-property promises.
When to use it
Type search parameters
A page reads URL query values while rendering.
Use global generated helpers
A team wants generated route types without repeated imports.
Interview questions
QWhat does PageProps provide?
PageProps is a globally available helper that types a page component's params and searchParams from a route literal. It does not need an import after Next.js has generated the types.
Follow-up: How do you make a dynamic segment type-safe? Pass a literal such as PageProps<'/blog/[slug]'>; the resulting params type exposes slug.
QHow is PageProps used in a page?
The route literal supplies the shape of dynamic params, while searchParams is also typed for the page. In the current async API, both properties are consumed with await.
Follow-up: What must happen if the helper is unresolved in the editor? Run next dev, next build, or next typegen so the global declarations are generated.
QHow does PageProps improve type safety?
A page can declare its props as PageProps<'/blog/[slug]'>, await props.params, and read slug with strict typing. It can likewise await props.searchParams for query values.
Follow-up: Why prefer a route literal over a generic string? It enables autocomplete and restricts params to the route's actual dynamic keys.
Related
LayoutPropsRouteContextnext typegen