Fermin Perdomo - Full Stack Developer

A sitemap is an XML file containing the list of indexable URLs of a domain. When sitemaps become large, they are split into 1 sitemap index file that point to multiple sitemap files. Learn more about splitting sitemaps with Google’s documentation. next-sitemap is a library that conveniently generates the sitemap XML document after reading the Next.js build manifests or when given a list of URLs. Check out some real examples, like the Google sitemap index or the sitemap of this website.

Static sitemaps generated at build time with next-sitemapStatic routes generated at build time are automatically picked up by next-sitemap. That is the case for both static pages or paths generated by getStaticPaths. It works out of the box!You may add other options, like paths to exclude, additionalPaths or generateRobotsTxt. Then, you’d automate its generation after building the project. To do that, simply add it to the postbuild step in package.json:How to build large dynamic sitemaps at runtimeLet’s say you have user generated URLs. You might go with pulling all URLs at build time in the next-sitemap config file, but then your sitemaps would only be updated when deploying. So let’s switch the approach to generate them on demand.You’ll need new routes to render the sitemap index and each of the sitemap pages. Sitemaps should be at the root level, with clean URLs like /server-sitemap.xml and /server-sitemap-0.xml, /server-sitemap-1.xml, etc. Since Next.js doesn’t let us do dynamic page names like server-sitemap-[page].ts, we can leverage rewrites.Create the following pages:Then, add the rewrites in the Next.js config:next-sitemap provides two APIs to generate server side sitemaps:

getServerSideSitemapIndex to generate the sitemap index file.

getServerSideSitemap to generate a single sitemap file.

For the index file, we just need to pull the amount of sitemap pages that will exist, and pass their URLs to getServerSideSitemapIndexLegacy.For the individual sitemaps, we need to fetch their corresponding page and pass the URLs getServerSideSitemapLegacy.Caching the dynamic sitemapsSince the sitemaps are hitting our API or DB to load many items, we don’t want to execute those queries too often.With the Cache-Control header, Next.js allows caching at the framework level the result of server-side functions, including getServerSideProps. It works automatically when deployed to Vercel. Otherwise, you’ll need to set it up with Redis or similar.Learn more about Vercel caching here. Note that the response size can’t exceed 10 MB!