Sitemap

Learn how to generate a sitemap for your supastarter app.

The sitemap is a file that lists all the pages of your app. It's essential for SEO, as it helps search engines understand your app and its pages.

The sitemap of your supastarter application is automatically generated by Next.js, but if you add new pages or change the routes of your marketing pages, you need to make sure the sitemap reflects these changes.

You can find the configuration for the sitemap in the apps/web/sitemap.ts:

import { config } from "@repo/config";
import { getBaseUrl } from "@repo/utils";
import { allLegalPages, allPosts } from "content-collections";
import type { MetadataRoute } from "next";
import { docsSource } from "./docs-source";
 
const baseUrl = getBaseUrl();
const locales = config.i18n.enabled
	? Object.keys(config.i18n.locales)
	: [config.i18n.defaultLocale];
 
const staticMarketingPages = ["", "/changelog"];
 
export default function sitemap(): MetadataRoute.Sitemap {
	return [
		...staticMarketingPages.flatMap((page) =>
			locales.map((locale) => ({
				url: new URL(`/${locale}${page}`, baseUrl).href,
				lastModified: new Date(),
			})),
		),
		...allPosts.map((post) => ({
			url: new URL(`/${post.locale}/blog/${post.path}`, baseUrl).href,
			lastModified: new Date(),
		})),
		...allLegalPages.map((page) => ({
			url: new URL(`/${page.locale}/legal/${page.path}`, baseUrl).href,
			lastModified: new Date(),
		})),
		...docsSource.getPages().map((page) => ({
			url: new URL(`/${page.locale}/docs/${page.slugs.join("/")}`, baseUrl)
				.href,
			lastModified: new Date(),
		})),
	];
}

If you want to add static marketing pages to the sitemap, you can do so by adding the path of it to the staticMarketingPages array.

If you want to add dynamic paths to the sitemap, you need to get all possible paths and then map them to the sitemap like we do for the posts, legal pages and docs.

Learn more about how to generate a sitemap in the offical Next.js documentation.

Sitemap

On this page