Generate sitemap for TanStack Router
npm install tanstack-router-sitemap- ✅ Generates sitemap.xml from your routes
- ✅ Extends full type safety from TanStack Router with autocomplete
- ✅ Supports dynamic routes
``bash`
npm install --save-dev tanstack-router-sitemap
`js
// 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
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",
}));
},
},
};
`js
// 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.
| 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 |
| Name | Type | Description |
| ------------------ | --------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| path | string | The path of the route priority?
Only for dynamic routes |
| | 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 |
MIT