with Next.js 13+ versions, how does meta tags generation work?
Answered
futuredevengineer posted this in #help-forum

as the title said, imagine if i have a client component, will meta tags still generate the way it does with server side rendering using
getServerSideProps
in older versions of next (12 and older)?Answered by Elm sawfly
So you need to divide your code into 2 files.
Make a different component for your reactive element, and import them in your
Make a different component for your reactive element, and import them in your
page.tsx
11 Replies
Both static and dynamic metadata through generateMetadata are only supported in Server Components.

Elm sawfly
So you need to divide your code into 2 files.
Make a different component for your reactive element, and import them in your
Make a different component for your reactive element, and import them in your
page.tsx
Answer

@Elm sawfly So you need to divide your code into 2 files.
Make a different component for your reactive element, and import them in your `page.tsx`

So make a normal component that have useEffect, event handlers
...etc
And import it to server component?
...etc
And import it to server component?

Fair enough, thanks

nah, this is not the answer.
simply, if you are using
useState
in the "reactive" component, then next.js component has to be marked with use client
, if that component was imported to the next js comp
Asian black bear
The answer is correct, your useState example doesn't contradict it.

@Asian black bear The answer is correct, your useState example doesn't contradict it.

hmm, why do i get error when i use a totally external component that uses useState imported to next component, that i need to mark it with
use client

Asian black bear
This is an entirely different issue then completely unrelated to metadata. It's likely that the third party component doesn't have a use client directive so you have to add it yourself with an intermediate import. Read this: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-third-party-packages-and-providers
If you have further questions regarding the new problem check existing threads in the forum and if they don't help open a new one.
If you have further questions regarding the new problem check existing threads in the forum and if they don't help open a new one.