After I changed my blog over to Next.js, I was looking for a quick and easy way to add a
sitemap.xmlfile to my site. And I stumbled across this nifty module that has maybe the lowest effort possible. Here is how I used next-sitemap to quickly add sitemap support.
I setup the
package.jsonto handle running the sitemap module automatically. This uses a nice feature of NPM, where
postwill run after the task it prefixes. In this case it will run after
npm run buildautomatically without any extra work.
This writes a
robots.txtfile to the
publicfolder. The robots file is automatically referencing the sitemap so search engine crawlers can find it.
This works by crawling the output of the
.nextfolder after building the site. The output in the folder determines the pages reference in the sitemap. It then creates all assets in the
publicfolder needed by Google and other search engines. It is a simple approach that relies on the
.nextnot changing its underlying behavior of it’s output. In other words, simple, but not robust.
- One alternative would be to create a
sitemap.xml.jsroute that outputs a xml formatted file. This file would have to import all the pages that were used to build the site, and generate the output. This is very similar to what my Svelte/Sapper project did.
- Another approach would be to modify the webpack configuration to gather information about all exported files, and then create a sitemap with that information.
- Finally, another approach would be to create a
/pages/api/sitemap.jsroute that outputs xml similar to the first alternative.