Migrating from next-sitemap to Native Next App Directory Sitemap for Payload website Template

Date Published

With the introduction of the App Router in Next.js 13+, dynamic sitemap generation no longer requires external packages like next-sitemap. Instead, you can now create sitemaps directly within your app using built-in support for MetadataRoute.Sitemap in the App Directory.

This migration simplifies the setup by:
  1. Eliminating dependency on next-sitemap
  2. Allowing dynamic sitemap generation using native functions and data fetching (e.g. from a CMS or database)
  3. Supporting caching, revalidation, and full customization
  4. If you're using next-sitemap in the Pages Router, migrating to the App Router means writing a simple app/sitemap.ts file that fetches your URLs and returns a structured array of { url, lastModified }.
  5. First Let's Change the individual sitemaps which would be referenced from main sitemap.

A couple things to note here, from the sitemap spec:

  • The url property is required and should be the full URL to the page you want to include in the sitemap.
  • The changeFrequency property is optional and can be one of the following values: always, hourly, daily, weekly, monthly, yearly, or never. This is a hint to search engines about how often the page is likely to change. Google and other search engines may choose to use different values than you specify if it becomes clear that your page changes at a different rate than you specify.
  • The priority property is "The priority of this URL relative to other URLs on your site." It is an optional property and can be any number between 0 and 1. If you don't include it, it will default to 0.5 for every page. I recommend setting this to 1 for your homepage, and cascading it down to 0.5 for other pages, depending on their relative importance to your site. It may not actually influence search engine behavior - and it's not a guarantee that a page will rank higher just because it has a higher priority - but it is a useful hint for search engines.

Do not push to production without testing the functionality of the full code. you can simply add your own collections or page locations and routes too.


The Pages Sitemap.

typescript

Now The Posts Sitemap

typescript

Now we need to add the sitemap.ts

typescript

We almost done. So we need to tidy up the package.json

typescript


If it doesn't seem like your sitemap is updating correctly, remember to check your /public directory for sitemap.xml and robots.txt files that may have been generated by next-sitemap, and delete them!


We can also add the robots text if needed.

typescript

And that's pretty much it . Now you can remove the next-sitemap package. We actually have re validating the cache manually in the website template by the tag so we don't need to add a re validate duration.

Auto-invalidation: Payload hooks call revalidateTag('collectionslug-sitemap') when content changes.