Menu
How do you pass props to the the page.jsx of layout? (NEXT 13)
//app/blog/layout.jsx
export default function RootLayout({ children }) {
return (
<div>
<Navbar />
<Sidebar />
{/*How do I pass any props from this root layout to this {children} that Im getting from page.jsx*/}
{children}
</div>
);
}
Basically, How do you pass a prop to a function prop (Next. JS 13)?
237
asked Aug 31 '25 18:08
According to the next13 docs you cannot:
It's not possible to pass data between a parent layout and its children. However, you can fetch the same data in a route more than once, and React will automatically dedupe the requests without affecting performance.
Because the layout component refers to a component that defines the overall structure and arrangement of other components within an application or a specific section of the UI. it is not designed to implement state management. its whole purpose is to reduce the time to first render to increase the user experience
But I found a way. In Rootlayout, console.log(props)
export default function RootLayout(props) {
console.log("props in layout",props)
return (
<div>
{props.children}
</div>
);}
this is what you will see
props in layout {
children: {
'$$typeof': Symbol(react.element),
type: {
'$$typeof': Symbol(react.module.reference),
filepath: '/home/tesla//node_modules/next/dist/client/components/layout-router.js',
name: '',
async: false
},
key: null,
ref: null,
props: {
parallelRouterKey: 'children',
segmentPath: [Array],
error: undefined,
errorStyles: undefined,
loading: undefined,
loadingStyles: undefined,
hasLoading: false,
template: [Object],
templateStyles: undefined,
notFound: [Object],
notFoundStyles: undefined,
childProp: [Object],
rootLayoutIncluded: true
},
_owner: null,
_store: {}
},
// THIS IS HOW WE PASS PROPS
params: {}
}
Many properties are not extensible but params. we can dynamically add properties to this object. for example
props.params.newProp = "testing";
Now visit page.js and
const Page = (props) => {
console.log("props in page", props);
return ()}
you will see that props is added to the params object
No matter what I tried, page.tsx had only two props: params and searchParams. searchParams is automatically populated if you have query parameters on url. So, I think params are the only way to pass props from the root layout. you can pass functions too
123
To pass props from your Layout component(RootLayout for you case) to page.jsx.
//app/blog/layout.jsx
export interface items {
foo: string;
bar: string;
}
export default function RootLayout({
children,
params,
}: {
children: React.ReactNode;
params: {
foo: string;
items: items;
age: number;
};
}) {
params.foo = "bar"; //string example
params.items = { foo: "bar", bar: "foo" }; //object example
params.age= 1; //number example
return (
<html lang="en" className="">
<body>{children}</body>
</html>
);
}
//app/blog/page.jsx
export default function Dashboard({
params,
}: {
params: { foo: string; items: items; age: number };
}) {
console.log(params.foo); //bar
console.log(params.items); //{foo: 'bar', bar: 'foo'}
console.log(params.age); //1
return (
<div></div>
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With