Generate Sitemap and RSS for Next.js App with Dynamic Routes Deployed to Vercel

[hangindev]

Recently, I had to add a sitemap and an RSS feed endpoint to my blog which is built with Next.js and uses Sanity as the content backend. The tricky part is to deal with Next.js dynamic routes and serialize the contents. I wrote about how I approach the problem and solve it. It should be applicable if you are using MDX or other CMSs.

Basically, what I did is that I created a postbuild script that searches for any pre-rendered HTML files inside the output pages directory and parses the files using cheerio to extract the data. The data will then be used to create sitemap.xml and feed.json which will be written to the output static folder. Lastly, I configured the vercel.json file to route the requests to /sitemap.xml and /feed.json to the corresponding files in the static folder.

Full post: https://hangindev.com/blog/generate-sitemap-and-rss-for-vercel-next-js-app-with-dynamic-routes

gist: https://gist.github.com/hangindev/dd11384cc79a54b6dc9646049b215d18

It might be an overkill solution so please share your feedback with me. I would love to learn how you approach the problem. 😉

[BramDecuypere]

To be honest, I feel like Next.js should come up with a solution for this. And it feels a bit weird they manage everything else that has to do with routing, but not the sitemap. While it's an essential part of SEO and it should be equally as flexible as the platform.

I've tried other solutions, but they weren't able to do what I want. Since I'm having a multilingual website, it ruins the sitemap.xml generators most of the time. Maybe these out of the box solutions will work for you, but be sure to check them. Especially on upgrades of Next.js.