Compatibility with Next.js v13 React Server Components #1068

Belco90 · 2022-10-28T09:57:54Z

Belco90
Oct 28, 2022

Hi there!

I'm a huge fan of next-seo, it really simplifies the whole SEO wire-up in my Next.js projects.

I'm migrating a simple project to the new app/ architecture with Next.js v13, and I'm afraid next-seo doesn't work anymore.

It kind of makes sense: Next.js complains it can't render complex elements from the server, with an error like this:

I realized this is caused by NextSeo or DefaultSeo used in React Server Component (which are all components by default in Next.js v13 using the App directory).

I moved my pages using next-seo to Client Component. Now, the project works fine, but there are no SEO tags included. It's too late at this point for injecting any meta tag, right? So I think this is expected.

I can put the meta tags myself in my Server pages components, for sure, but I liked how next-seo simplified this process. I was basically wondering if there is any plan to make this package compatible with the RSC, or we are expected to just set the meta tags manually.

Answered by garmeeh

Oct 31, 2022

🚢 next-seo@5.13.0 now allows you to opt in to app directory. Please make sure to read the docs I wrote detailing a little bit about how things of changed.

Open to feedback, suggestions and info on potential bugs here

View full answer

Belco90 · 2022-10-28T10:50:28Z

Belco90
Oct 28, 2022
Author

I just found you can modify the <head> tag using a new special head.js component. This is what I'll use for now, but it makes me wonder if next-seo makes any sense in all this then.

7 replies

eric-mathison Oct 28, 2022

Just keep in mind there warning:
Warning: Currently, the export does not re-render on client-side transition using next/link, only on initial render and reloads. To work around this for <title>, you can use a client component with useEffect that updates document.title. We plan to fix this in a future release.

lveillard Oct 29, 2022

Thanks @garmeeh ! Happy to test it once is out ;)

dejurin Oct 29, 2022

head.tsx does not provide such advanced features as next-seo.

garmeeh Oct 29, 2022
Maintainer

Hey @eric-mathison do you have link to the issue on that warning by any chance? Would be good to up to date with it.

I don't think I will add any workaround in next-seo for this as it is an upstream issue that is going to be fixed.

Thank you for highlighting this! I would probably have lost hours pulling my hair out wondering why it wasn't working locally 😅

eric-mathison Oct 29, 2022

I found it while reading up on the docs here: https://beta.nextjs.org/docs/routing/pages-and-layouts#modifying-head
I wasn't able to find any issue discussing it more though. I wish there was some idea of when in 'the future' they are planning on tackling this.
I realize that this doesn't necessarily affect google or any crawlers individually loading URLs, but I don't particularly want to create a client component for every page either just to change the meta in the head.
I'm uncertain what all the side effects of this will be though and what information will need to be put in the client component (useeffect). Will any social share buttons pull the wrong og data for instance? I'll have to play around and see. It might not be as big of a deal and for visual sake, the title might be the only thing needing to be updated.

garmeeh · 2022-10-30T13:12:35Z

garmeeh
Oct 30, 2022
Maintainer

I spent the day yesterday playing around with different ways to adapt how NextSeo will work with the new app directory.

I also spent some time researching how the new flow works with head.js and layout.js. If anyone would like to check that out, you can find my quick summary here on the feedback for the Next.js team. I have asked them for clarification on what the intentional behaviour is. This will steer the direction of how I adapt next-seo.

I have an idea of how to approach it so once I get clarification I will refactor what I have and get it live for testing.

1 reply

Belco90 Oct 30, 2022
Author

@garmeeh amazing! Thanks for the quick feedback.

SimonVillage · 2022-10-31T08:43:11Z

SimonVillage
Oct 31, 2022

So just to confirm, currently there is no way to migrate to app folder structure as long as next-seo isn't compatible?

0 replies

garmeeh · 2022-10-31T15:11:03Z

garmeeh
Oct 31, 2022
Maintainer

🚢 next-seo@5.13.0 now allows you to opt in to app directory. Please make sure to read the docs I wrote detailing a little bit about how things of changed.

Open to feedback, suggestions and info on potential bugs here

1 reply

Belco90 Oct 31, 2022
Author

Mant thanks! I'll give it a try during this week and leave feedback in the provided link.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compatibility with Next.js v13 React Server Components #1068

{{title}}

Replies: 4 comments 9 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Compatibility with Next.js v13 React Server Components #1068

Belco90 Oct 28, 2022

Replies: 4 comments · 9 replies

Belco90 Oct 28, 2022 Author

eric-mathison Oct 28, 2022

lveillard Oct 29, 2022

dejurin Oct 29, 2022

garmeeh Oct 29, 2022 Maintainer

eric-mathison Oct 29, 2022

garmeeh Oct 30, 2022 Maintainer

Belco90 Oct 30, 2022 Author

SimonVillage Oct 31, 2022

garmeeh Oct 31, 2022 Maintainer

Belco90 Oct 31, 2022 Author

Belco90
Oct 28, 2022

Replies: 4 comments 9 replies

Belco90
Oct 28, 2022
Author

garmeeh Oct 29, 2022
Maintainer

garmeeh
Oct 30, 2022
Maintainer

Belco90 Oct 30, 2022
Author

SimonVillage
Oct 31, 2022

garmeeh
Oct 31, 2022
Maintainer

Belco90 Oct 31, 2022
Author