Static sitemap file
A small, mostly static site needs a conventional sitemap without runtime generation.
Next.js 16+ · Directive
sitemap
Next.js App Router supports static sitemap.xml files and generated sitemap.ts or sitemap.js files. Generated sitemaps export a default function that returns URL entries for search-engine crawlers.
How it works
Add sitemap.ts or sitemap.js at the root of the app directory and export a default function that returns URL entries. Next.js converts those entries into the sitemap response; the route is cached by default unless request-time APIs or dynamic configuration make it dynamic.
Syntax
export default function sitemap(): MetadataRoute.SitemapReturns
A sitemap function returns an array of URL entries; each entry can contain fields such as url, lastModified, changeFrequency, and priority.
Key points
- The App Router recognizes sitemap.xml, sitemap.js, and sitemap.ts as metadata file conventions.
- Dynamic sitemap files export a default function whose result supplies the URL records.
- TypeScript code can use the documented Sitemap type to describe generated sitemap data.
- Multiple sitemaps can be organized through route-segment nesting or generated with generateSitemaps.
- Route segments can each contain their own sitemap file when sitemap output should be separated by section.
- Use generateSitemaps when sitemap partitioning needs to be produced programmatically.
Common mistakes
- The generated sitemap is cached by default; using a request-time API or dynamic configuration changes that behavior.
- A static sitemap.xml is suitable for smaller applications; use sitemap.ts or sitemap.js when the URLs must be generated programmatically.
- When using multiple sitemaps, consumers access generated files through the route containing the sitemap ID.
Example: app/sitemap.ts
export default function sitemap() {
return [
{
url: 'https://acme.com',
lastModified: new Date(),
changeFrequency: 'yearly',
priority: 1,
},
]
}Place this file at app/sitemap.ts to generate the site's sitemap from an array of URL entries.
When to use it
Programmatically generated sitemap
A site has dynamic routes whose URLs come from application data.
Multiple sitemaps
A large site needs separate sitemap outputs for route groups or data partitions.
Interview questions
QHow do you create a sitemap in the App Router?
Use app/sitemap.xml for a static file, or app/sitemap.ts/app/sitemap.js for a generated sitemap. A generated file exports a default function whose result is an array of URL objects.
Follow-up: How would you split a large sitemap? Use generateSitemaps to return objects with an id, then generate each sitemap from that id.
QWhat does the generated sitemap function return?
Each returned entry describes a URL and can include fields such as url, lastModified, changeFrequency, and priority. TypeScript projects can use the documented Sitemap type for the return value.
Follow-up: What route serves a generated split sitemap? It is exposed at the route segment followed by /sitemap/[id].xml.
QHow can an application generate multiple sitemaps?
Multiple sitemap files can be created by nesting sitemap.(xml|js|ts) in different route segments. For programmatic splitting, use generateSitemaps, which returns sitemap identifiers.
Follow-up: What determines the number of generated sitemap URLs? The objects returned by generateSitemaps determine the identifiers and therefore the generated sitemap instances.
Related
generateSitemapsMetadata FilesRoute HandlersSitemaps XML format