react-three-next VS next-seo

ps, you can also try https://github.com/pmndrs/react-three-next where we have abstracted this stuff. it gets 100% lighthouse score for performance, accessibility, best practices and seo.

react-three-next

there's a whole eco system around three in react and next. it starts with react-three-fiber, drei has tons of helpers, and then there's three-next for when you need 100% lighthouse, persisting canvas across routes etc.

It’s a good combination, react-three-fiber expresses three in react, react-three-next makes for a good starting template for common issues like persisting canvas between routes. And Vercel is funding both pmndrs and r3f.

The team at r3f are doing killer work. Check out this repo for a way to do SSR with their react renderer. https://github.com/pmndrs/react-three-next

you could also check out https://github.com/pmndrs/react-three-next which is a nextjs starter. it gives you almost 100% lighthouse, and it has all these little tricks inbuilt.

Also check out https://github.com/pmndrs/react-three-next uses react three fiber, which is awesome.

The third one is Schema.org JSON-LD. I actually question the usefulness of this feature, but if it is relatively easy to implement without a glaring downside, just give it a shot I guess? In Next.js, there is next-seo package that greatly simplifies the implementation of Schema.org JSON-LD.

Next SEO

Next Seo GitHub Repository

I would recommend checking out https://github.com/garmeeh/next-seo. It does SEO for you. Additionally, going to recommend precisely what u/saarnav mentioned. https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

Any opinions on https://github.com/garmeeh/next-seo ?

To simplify this, we can use a package called next-seo. Next SEO makes managing SEO easier in your Next.js projects.

For SEO there is next-seo.

Meta tags exist in the head element of the page providing important information about the page that can used by search engines and social media sites. There are a variety of meta tags that represent different types of information for different search engines. A popular subset of standardized meta tags are described in the open graph protocol. Managing these tags for every page and generating them dynamically for blog pages has it’s own overhead. Thus for that reason, I have used the Next-SEO plugin. The Next-SEO plugin provides DefaultSEO component that contains tags that will be defined for all routes by default which subsequently can be overwritten at a page level by then using the NextSEO component. Below is the default SEO config used by me.

I have also used this package to make the SEO tag section easier to manage: https://github.com/garmeeh/next-seo

We will have to populate SEO-related meta tags with the relevant information for each page. To do so, we will use garmeeh/next-seo.