Update: Adding Dynamic Sitemap to ShipFa.st - Sagui Itay

I’ve recently posted about adding a dynamic sitemap to a ShipFa.st website. The main idea was to add support for including the blog posts by exposing a GET endpoint at app/server-sitemap.xml/route.ts and include the returned page in the main sitemap.xml file.

While I still think this is a viable and good solution for full dynamic sitemaps, it’s a bit of an overkill for the blog posts. It was pointed out to me that there’s a much simpler solution: You can use NextJS’s generateStaticParams method to statically generate the blog post pages. This will result in 2 side effects:

Blog Post pages will be statically generated, which will result in faster loading of the pages, since they were generated at build time, instead of runtime.
Blog Post pages will be included automatically in the generated sitemap.xml

Here’s how you can do that – in the app/blog/[articleId]/page.tsx page add the following snippet:

export function generateStaticParams() {
  return articles.map((article) => ({
    articleId: article.slug
  }))
}

This tells NextJS to generate a static page for each article.

That’s it – simple an clean.

Obviously, you can do the same for the categories page at app/blog/category/[categoryId]/page.tsx:

export function generateStaticParams() {
  return categories.map((category) => ({
    categoryId: category.slug
  }))
}

And the authors page, at app/blog/author/[authorId]/page.tsx:

export function generateStaticParams() {
  return authors.map((author) => ({
    authorId: author.slug
  }))
}

Related Posts