How to statically generate sitemap in Nextjs app router?

In a starter project I have there is sitemap.ts file in app folder:

import { getBlogPosts } from "app/server/actions";

export const baseUrl = "https://portfolio-blog-starter.vercel.app";

export default async function sitemap() {
  let blogs = (await getBlogPosts())?.posts?.map((post) => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: post.metadata.publishedAt,
  }));

  let routes = ["", "/blog"].map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date().toISOString().split("T")[0],
  }));

  return [...routes, ...blogs];
}

I think due to using this getBlogPosts this adds to my function invocations which are limited for free plans on Vercel. Although I don't know also how often is this sitemap called?

Now I am thinking maybe I can statically generate sitemap. But can't find official info on this on Nextjs app router. Although I read somewhere sitemap is this basically:

<!-- public/sitemap.xml -->
   <xml version="1.0" encoding="UTF-8">
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>http://www.example.com/foo</loc>
       <lastmod>2021-06-01</lastmod>
     </url>
   </urlset>
   </xml>

And then you can put it in public folder. But in the starter kit I have, I can't even see public folder, can someone help?

Solution

Sitemaps are used by search engines to index your site. The frequency at which search engines requests your sitemap might vary, some users find that their sitemap gets queried every day.

If you're interested in having a static sitemap you have multiple options. According to the docs you can add a sitemap.xml file inside your app folder and Next.js will pick it up.

However, it would probably be easier for you to use the sitemap.ts file you already have. Normally sitemap generation happens during build time, which means that in order to generate that file you'd only be using 1 function invocation, unless you're using dynamic APIs like cookies, headers, or searchParams. You can also force this to be static (according to this) by adding the following line inside your file:

export const dynamic = 'force-static';

This will still use a single function invocation during build-time.