Tanstack Router Sitemap

Features

• ✅ Generates sitemap.xml from your routes
• ✅ Extends full type safety from TanStack Router with autocomplete
• ✅ Supports dynamic routes

Installation

npm install --save-dev tanstack-router-sitemap

Usage

// utils/sitemap.ts
import { type FileRouteTypes } from "@/routeTree.gen";
import { Sitemap } from "tanstack-router-sitemap";

// This will become a string literal union of all your routes
export type TRoutes = FileRouteTypes["fullPaths"];

// Define your sitemap
export const sitemap: Sitemap<TRoutes> = {
  siteUrl: "https://example.com",
  defaultPriority: 0.5,
  routes: {
    "/home": {
      priority: 1,
      changeFrequency: "daily",
    },
    // Dynamic route example
    "/posts/$postId": async (route) => {
      const postsResponse = await fetch("https://example.com/api/posts");
      const posts = await postsResponse.json();

      return posts.map((post) => ({
        path: `/posts/${post.id}`,
        priority: 0.8,
        changeFrequency: "daily",
      }));
    },
  },
};

// app.config.ts

import { defineConfig } from "@tanstack/start/config";
import { generateSitemap } from "tanstack-router-sitemap";

// import the sitemap you defined earlier
import { sitemap } from "@/utils/sitemap";

export default defineConfig({
  server: {},
  vite: {
    plugins: [generateSitemap(sitemap)],
  },
});

This plugin will generate a sitemap.xml file in your public directory.

Configuration Options

Name	Type	Description
siteUrl	string	The base URL of your site
defaultPriority?	number	The default priority for all routes
defaultChangeFreq?	"always" | "hourly" | "daily" | "weekly" | "monthly" | "yearly" | "never"	The default change frequency for all routes
routes	{[route: string]: Route | Route[] | async (route) => Route[] }	Only static routes can return a Route, dynamic routes must return an array of Route. See below for full Route details

Route Configuration

Name	Type	Description
path	string	The path of the route Only for dynamic routes
priority?	number	The priority of the route
changeFrequency?	"always" | "hourly" | "daily" | "weekly" | "monthly" | "yearly" | "never"	The change frequency of the route
lastModified?	string | Date	The last modified date of the route

License

MIT