How to generate dynamic sitemap in React?

Question

I'm finding difficulty in generating sitemap in React. There is not much content out there and are confusing for a beginner. I also saw some React videos which suggests to use Next.js for it. I'm so confused.

I need to generate dynamic sitemap for tools and category. I'm using Supabase for database.

I need to generate dynamic sitemap for tools and category. I'm using  Supabase for database.

Naveen MC · Accepted Answer

Hi Yogesh. Based on your previous screenshot you have posted. I assume you're using Plain React app. I suggest you to use Nextjs instead. All you have to do is move the components and business logics. Why because, React apps will be hydrated after the dom is initialised. So there will be problem with SEO as well. This is fine for dashboard apps. Since you're building Directory site. I feels it's not an good option.

Nextjs provides way to generate dynamic sitemap, and everything out of the box.

Yogesh · Answer

Thanks @mcnaveen , I'll check out Next.js

Jesse · Answer

+1 on this check the docs on sitemaps https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap

Next.js also handles a lot of other SEO relevant things like image optimization etc. you flip through the official Next.js Learn which is pretty good and you are good to go https://nextjs.org/learn

Go to Homepage	`g` `h`
Go to Done Todos	`g` `d`
Go to Questions	`g` `q`
Compose a New Todo	`n`
Go to Search	`/`
Show this dialog	`?`

How to generate dynamic sitemap in React?

Keyboard Shortcuts