Dynamic SEO Files

Instead of manually maintaining static .xml or .txt files in your public folder, Next.js allows you to create special .ts files directly in your app directory.

For example, placing a sitemap.ts file at the root of your app directory tells Next.js to execute that function, take the returned array, and output a valid sitemap.xml file for search engines.

If you run a blog, you don't want to manually edit an XML file every time you publish a new article.

By using sitemap.ts, you can connect directly to your database, fetch all published articles, and map them into the required sitemap format. Next.js handles the XML generation.

tsx

import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {

const posts = await fetchPosts();

const postUrls = posts.map((post) => ({

url: https://acme.com/blog/${post.slug},

lastModified: post.updatedAt,

}));

return [

{ url: 'https://acme.com', lastModified: new Date() },

...postUrls,

];

}