Can we pass a prop from a layout to a child page
Answered
Western Meadowlark posted this in #help-forum
Western MeadowlarkOP
I'm using Next 14 with app directory
I'm trying to pass a prop from my layout to its children.
I found this answer on stackoverflow https://stackoverflow.com/questions/74573236/pass-props-to-page-jsx-child-from-root-layout-next-js-13
where the author found a workaround by passing the custom key value in the params object in props.
I also tried the same thing but cant seem to get it working. Was it removed or am I missing something?
created a minimum reproducible example as well
https://github.com/cmgchess/can-we-pass-props-from-layout
Thanks in advance 🙂
I'm trying to pass a prop from my layout to its children.
I found this answer on stackoverflow https://stackoverflow.com/questions/74573236/pass-props-to-page-jsx-child-from-root-layout-next-js-13
where the author found a workaround by passing the custom key value in the params object in props.
I also tried the same thing but cant seem to get it working. Was it removed or am I missing something?
created a minimum reproducible example as well
https://github.com/cmgchess/can-we-pass-props-from-layout
Thanks in advance 🙂
65 Replies
I've used this before and it's worked, try making the components accepting the prop.params a client component
If this doesn't work, I would look into a state management solution like Zustand and you can create a store where you can set it in your layout and get it in your page
You can also use IndexDB, but it's a bit random.
Also a cookie would work
Romanian Mioritic Shepherd Dog
any solution for this?
unfortunately I can't do this as I am calling generateMetadata in this file. since it needs to be a server component, I can't make it as a client component
Oriental chestnut gall wasp
What is the specific use case for this?
Perhaps there's another way to do the same thing
Maybe use context?
Use headers then
Set a header in the layout.tsx and get it from your page
Oriental chestnut gall wasp
Again it depends on what the use case is. There's a handful of different solutions, but without know what OP or Rds are trying to accomplish, it is hard to recommend a specific approach
Romanian Mioritic Shepherd Dog
Actually i want to have a url like this,
localhost:3000/[locale]/reviews/[id]
but according to my requirements, basePath should be '/reviews'. So I cannot create a dynamic folder inside my app directory for [locale] as basePath was set and locale should come before the 'reviews' segment.
So what I did was I used rewrites method in next.config.js file and set it. Now the issue is I want to get that [local] from my url in the [id] directory's page.tsx file. I have called generateMetadata in that file to dynamically generate meta data for the pages. So what I did was i used usePathname in layout.tsx file to get the locale and tried to pass that as a prop to page.tsx file as params.prop since it's a server component. But it didn't work
localhost:3000/[locale]/reviews/[id]
but according to my requirements, basePath should be '/reviews'. So I cannot create a dynamic folder inside my app directory for [locale] as basePath was set and locale should come before the 'reviews' segment.
So what I did was I used rewrites method in next.config.js file and set it. Now the issue is I want to get that [local] from my url in the [id] directory's page.tsx file. I have called generateMetadata in that file to dynamically generate meta data for the pages. So what I did was i used usePathname in layout.tsx file to get the locale and tried to pass that as a prop to page.tsx file as params.prop since it's a server component. But it didn't work
For that I need to make both files as client components right?
Yeah but the issue is at the same time i need to access that locale from the url. so for that I had to make that a client using 'use client'.
I've sent my use case. Appreciate if i can a have any kind of a solution for the issue
Oriental chestnut gall wasp
is there a reason you need 2 dynamic routes?
Romanian Mioritic Shepherd Dog
yes first one is the locale like en-us, zh, en-GB and the second one you can assume as a product id
Oriental chestnut gall wasp
could you not then do /review/[id]/[locale]
To get pathname, there's really no way to get path without marking a component as client.
Alternatively, instead of generate dynamic route, u could pass local as url query? And use searchparams on page.tsx to get that value
This won't need any client component
Alternatively, instead of generate dynamic route, u could pass local as url query? And use searchparams on page.tsx to get that value
This won't need any client component
So some are server components and some are client is what you’re saying?
Romanian Mioritic Shepherd Dog
nope. can't change the requirementðŸ˜
I know the best solution is going against the requirement but unfortunately cannot change it
In here params.prop fetches the last route value
If last route is /id, it will show id
If last route is /id, it will show id
Romanian Mioritic Shepherd Dog
No I had to make that layout file as a client as i used usePathname to get the locale segment from the url. Better if i can access it as a server component
You can by using headers
Romanian Mioritic Shepherd Dog
Ik but in here it says that we can do it like this
https://stackoverflow.com/questions/74573236/pass-props-to-page-jsx-child-from-root-layout-next-js-13
https://stackoverflow.com/questions/74573236/pass-props-to-page-jsx-child-from-root-layout-next-js-13
And running
headers().get(“refererâ€)
Answer
Romanian Mioritic Shepherd Dog
How do i get the locale from the url using headers?
But i have to get it from the url. so how can i get it? it's not a predefined one
it can be changed
Filter out the url so you’re left with your locale
Romanian Mioritic Shepherd Dog
how do i filter out it?
Oriental chestnut gall wasp
May I ask what this is for and why you can't change your approach?
Probably a client requirement
Oriental chestnut gall wasp
wait if the base path has to be reviews, then just do /reviews/[id]/[locale] right?
or /reviews/[...slug]
Get it and then just remove the url
Romanian Mioritic Shepherd Dog
haha couldn't change🙂 . IK the easiest solution is adding that locale after reviews
Oriental chestnut gall wasp
what does your url have to be then?
I'm confused
Give me an example of what is returned when you use
headers().get(“refererâ€)
and then tell me what bit you want@Romanian Mioritic Shepherd Dog
Romanian Mioritic Shepherd Dog
To get it I have to use usePathname right? that means i have to make it client component and in that case I can't call the headers method as it works in server components, right?
Headers is server feature
Romanian Mioritic Shepherd Dog
localhost:3000/en-us/reviews/nike, like this
Don't need to mark as client
Since that will give you the full url
And then filter it out as I said
Oriental chestnut gall wasp
localhost:3000/[locale]/reviews/[id]
right?
what is wrong with that?
Romanian Mioritic Shepherd Dog
Thank you very much. It worked. This made my day🥹
Don’t forget to mark as answer
Oriental chestnut gall wasp
this isn't his post
Oh yeah lol
Romanian Mioritic Shepherd Dog
Ah now it was fixed. thanks for your help
Forgot
Oriental chestnut gall wasp
We still don't know why OP needs to pass props down
Yeah lol
Western MeadowlarkOP
sorry this was asked on behalf of rds 🙂
ill mark it as answer
ill mark it as answer
Oriental chestnut gall wasp
Oh ok