4 min read
To gain the best of SEO we should use a sitemap for our sites. Search engines like Google can use those sitemaps to crawl our sites more efficiently.
Create a sitemap
We could simply create a sitemap, like the following and put it into the public directory of our app:
But this is very error prone. Every time we create a new blog post or add another page to the site we have to manually modify the sitemap.
I think we can do better.
We could generate our sitemap at build time by traversing the app directory and write it afterwards to the public directory:
The snippet above uses globby to find each
page.tsx in the app directory (
After the file paths are collected, each path is transformed to the url path (
The last step is to create the sitemap (
createSitemap) and write to the public directory.
This works well, until we introduce dynamic routes to our app.
A dynamic route can be identified by the square brackets around a variable e.g.:
To handle those routes in the sitemap generator could become very tricky.
I will use a simple example how it could be implemented if the site uses contentlayer:
The first interesting line in this snippet is the import of the posts generated by contentlayer (
I had to specify the whole path including extension, otherwise typescript threw errors at me.
expandPath function we will check the path and
if it is our dynamic route, we will replace it with the slugs of all posts.
This function is finally used by the
collectPath function to create our flat array of paths.
This method covers only the basics.
If you are use something like grouped routes or
pages directory is used in addition to the app directory, you have to go a few extra miles.
Now it is time to add our generator to the build:
Whenever our page is build using the
our sitemap is build afterwards.
The order is important, because contentlayer have to run first in order to generate our content types.
We could specify the url to our sitemap in the
robots.txt, this makes it easier for search engines to find our sitemap.
If we use the default path
/sitemap.xml most of the search engines should find it without the entry in the
However the entry could look like the following:
Since our sitemap is generated, we should not include it in our repository. So we should ignore it:
If we would not do that, we would see changes to the
sitemap.xml every time we change the structure of the page.
Posted in: nextjs, sitemap, contentlayer