Next.js Discord

Discord Forum

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

Answered
futuredevengineer posted this in #help-forum
Open in Discord
Avatar
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

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
@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`
Avatar
So make a normal component that have useEffect, event handlers
...etc
And import it to server component?
Avatar
Fair enough, thanks
Avatar
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
@Asian black bear The answer is correct, your useState example doesn't contradict it.
Avatar
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.