Exporting a Metadata Object in layout.js seems to override the contents of page.js
Answered
Barbary Lion posted this in #help-forum
Barbary LionOP
I used create-next-app to create my project, and I'm having the above issue.
Before I export the metadata object, my page.js file works as expected and shows a heading of 'One Player'. But as soon as I create the exported metadata object, the page greys out and nothing is displayed.
Any ideas on how to troubleshoot this?
Before I export the metadata object, my page.js file works as expected and shows a heading of 'One Player'. But as soon as I create the exported metadata object, the page greys out and nothing is displayed.
Any ideas on how to troubleshoot this?
Answered by Plague
What you're doing in the
This isn't pages router. If you need access to the searchParams in your page server component you need to grab it from the props.
Play page won't even work, the useRouter hook from next/navigation doesn't even have a query property on it. This isn't pages router. If you need access to the searchParams in your page server component you need to grab it from the props.
13 Replies
The example code you showed above shows that your page will have the title "One Player" are you saying this isn't happening when using the metadata object inside the layout.js?
Barbary LionOP
yes exactly
Hmm, what is your folder structure?
Barbary LionOP
Yeah everything seems right, I've encountered this issue before as well specifically with layouts. It's most likely a bug, and it seems to happen with title, and description tags. For now you can just export the metadata object in the page and it'll work.
Hopefully they will fix this soon.
Hopefully they will fix this soon.
Barbary LionOP
so I've tried doing it that way and it works, but the issue is that I need to use useRouter, which needs me to turn the page into a client component, which means that I can't export metadata
What you're doing in the
This isn't pages router. If you need access to the searchParams in your page server component you need to grab it from the props.
Play page won't even work, the useRouter hook from next/navigation doesn't even have a query property on it. This isn't pages router. If you need access to the searchParams in your page server component you need to grab it from the props.
Answer
and if you need it in a client component you need to use
useSearchParamsBarbary LionOP
cool I'll try this out, thanks
Barbary LionOP
this worked, thanks a lot for your help @Plague 🎉