Infer layout route parameters
A layout needs type-safe route parameters without manually declaring the parameter object.
Next.js 16+ · Type Alias
LayoutProps
LayoutProps is a globally available Next.js TypeScript helper for strongly typing App Router layouts. A route literal enables inference of params, children, and named parallel-route slots from the directory structure.
How it works
LayoutProps<'/dashboard'> is a globally available, generated TypeScript helper for App Router layouts. The route literal lets Next.js infer the layout's params, children, and named parallel-route slots from the directory structure, without an import.
Syntax
LayoutProps<'/route'>Parameters
| Name | Type | Description |
|---|---|---|
route | string literal | The route pathname literal used to infer parameters and named slots from the layout's directory structure. |
props | LayoutProps<route> | The rendered nested route content and any inferred named parallel-route slots. |
Returns
A type describing the props accepted by an App Router layout, including inferred route parameters, children, and named slots.
Key points
- Use the helper to derive layout route parameters and named parallel-route slots from the app directory.
- Reference the type directly in a TypeScript layout; no module import is needed after generation.
- The
childrenprop represents the content nested beneath the current layout. - Next.js creates the route-aware helper types through development, production build, or explicit type-generation commands.
Common mistakes
- The helper's generated types are unavailable until one of the documented type-generation commands has run.
- Do not import
LayoutProps; it becomes a global type after generation.
Example: Typed layout props
export default function Layout(props: LayoutProps<'/dashboard'>) {
return (
<section>
{props.children}
{props.analytics}
</section>
)
}A dashboard layout receives its rendered child content and the typed analytics parallel-route slot inferred from the app directory.
When to use it
Type named parallel-route slots
A layout renders content from parallel-route folders such as @analytics.
Avoid handwritten layout prop types
A team wants route-aware props without maintaining duplicated interfaces.
Interview questions
QWhat is LayoutProps and what does its route argument provide?
LayoutProps is a generated global helper for typing App Router layout props. Passing a route literal such as '/dashboard' enables inference for route parameters and named slots from the directory structure.
Follow-up: How are the types made available? They are generated by next dev, next build, or next typegen, after which no import is required.
QWhich layout props can LayoutProps infer?
A layout should render props.children, which contains the route content wrapped by that layout. The helper can also infer named slots created by parallel-route folders, such as @analytics.
Follow-up: What determines a named slot? A matching @name folder in the layout's directory structure produces the corresponding typed prop.
QDoes a layout need to import LayoutProps?
The helper is globally available and therefore is referenced directly in the layout's TypeScript signature. Its types are generated as part of the Next.js type-generation workflow rather than imported from a package.
Follow-up: What should happen in a clean environment? Run next typegen, or use next dev or next build, before relying on the generated global type.
Related
PagePropsRouteContextparamschildrenparallel routes