Next.js Discord

Discord Forum

Metadata Next Js 13 with App router in client file

Answered
Californian posted this in #help-forum
Open in Discord
CalifornianOP
I can not use <Head> to generate my Metadata as I am in app router.

I wanted to use : 
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}


But I can not because this is only in server side.

How should I create my metadata in a client file using app router (all my files, including my layout are client side). Thank you !
Answered by B33fb0n3
the metadata is only serverside available. As you said: all your components are clientside. That's a problem. So change any file (the one that is most up in your tree) to a server component and import your client components to it. Like that the top component is a server component and can define metadata and all others work the same
View full answer

10 Replies

@Californian I can not use <Head> to generate my Metadata as I am in app router. I wanted to use : import type { Metadata } from 'next' export const metadata: Metadata = { title: '...', description: '...', } But I can not because this is only in server side. How should I create my metadata in a client file using app router (all my files, including my layout are client side). Thank you !
B33fb0n3
the metadata is only serverside available. As you said: all your components are clientside. That's a problem. So change any file (the one that is most up in your tree) to a server component and import your client components to it. Like that the top component is a server component and can define metadata and all others work the same
Answer
CalifornianOP
Thank you ! Very clear 🙂
Does it mean that my layout should also be a server side ?
iyxan23
very! a somewhat of a personal preference of mine, but any route segments (page.tsx, layout.tsx, ...) should only be server components
if you really do need them as client components, i tend to just return them even if they don't really affect anything:
export default function PageA() {
  return <PageAContent />;
}
@Californian Does it mean that my layout should also be a server side ?
B33fb0n3
yes, your layout should be serverside. Try to make nearly everything serverside and make only the interactive parts clientside
CalifornianOP
Thank you very much !
Border Terrier
One more important thing. Use Client Components with caution, do not abuse them as entire pages. This will help for first with app seo and with user experience on page.
B33fb0n3
happy to help
@Border Terrier One more important thing. Use Client Components with caution, do not abuse them as entire pages. This will help for first with app seo and with user experience on page.
Asian black bear
SEO isn’t negatively affected by client components. They are still prerendered on the server.