I need to improve the SEO / meta data for a React website that I made with the npm pages Create-React-App and React-Router. I would like to remake the website using NextJs in the most efficient and effective way possible. The project is hosted on Netlify.
I am doing this because this is a single page application that uses react-router, and so webpage meta data is not displayed for each page when being shared on social media sites and not rendering in search engine results pages, other than the meta data included with the root index.html page.
NextJs includes server-side rendering and static rendering. It’s my understanding that this will allow distinct page metadata to be included with each when they appear in search results or in rendered page preview that is generated when the link is shared on various social media sites.
I will completely understand if there is no streamlined way to do this, but I am new to NextJs, and I want to make sure I am not overlooking any methods that would simplify and speed up this task. The client who ordered this site expected meta data to render with each page so they are eager to have to have the SEO improved as soon as possible.
This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.