Next.js Discord

Discord Forum

with Next.js 13+ versions, how does meta tags generation work?

Answered
XO posted this in #help-forum
Open in Discord
Avatar
XOOP
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 page.tsx
View full answer

11 Replies

Both static and dynamic metadata through generateMetadata are only supported in Server Components.
Avatar
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
Answer
Avatar
XOOP
So make a normal component that have useEffect, event handlers
...etc
And import it to server component?
Avatar
Elm sawfly
Yup
Avatar
XOOP
Fair enough, thanks
Avatar
XOOP
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
Avatar
Asian black bear
The answer is correct, your useState example doesn't contradict it.
Avatar
XOOP
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
Avatar
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.