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

Answered

futuredevengineer posted this in #help-forum

2024-02-12T08:13:31.000Z

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

@futuredevengineer 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)?

Elm sawfly

2024-02-12T08:35:58.000Z

https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata

Both static and dynamic metadata through generateMetadata are only supported in Server Components.

Elm sawfly

2024-02-12T08:38:43.000Z

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

@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`

futuredevengineerOP

2024-02-12T08:56:15.000Z

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

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

Elm sawfly

2024-02-12T08:56:45.000Z

Yup

futuredevengineerOP

2024-02-12T08:57:04.000Z

Fair enough, thanks

futuredevengineerOP

2024-02-12T11:24:00.000Z

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

2024-02-12T11:25:09.000Z

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.

futuredevengineerOP

2024-02-12T11:26:23.000Z

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

2024-02-12T11:27:59.000Z

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.