Next.js 55: sitemap.ts y robots.ts
easy⏱ 5 mincoursenextjs
Archivos especiales, salida generada
Ambos archivos viven en la raíz de app/ y se detectan automáticamente — visitar /sitemap.xml o /robots.txt en producción sirve lo que devuelvan tus funciones, convertido al formato correcto. Como es solo una función, puedes hacer await de una consulta a base de datos por cada post o producto antes de construir la lista de URLs.
// app/sitemap.ts
export default async function sitemap() {
const posts = await getAllPosts();
return [
{ url: "https://example.com", lastModified: new Date() },
...posts.map((p) => ({
url: "https://example.com/blog/" + p.slug,
lastModified: p.updatedAt,
})),
];
}
// app/robots.ts
export default function robots() {
return {
rules: { userAgent: "*", allow: "/", disallow: "/admin" },
sitemap: "https://example.com/sitemap.xml",
};
}
Agrega un post al sitemap
Ya se agregó un tercer post, app-router-deep-dive, al arreglo POSTS — confirma que el urlset generado abajo tiene una entrada url que lo refleje. Luego agrega un post propio (cualquier slug y updatedAt sirven) y observa que el sitemap crece de nuevo.
Mantenlos sincronizados automáticamente
Como sitemap.ts lee de la misma fuente de datos que tus páginas, un post nuevo que aparece en tu CMS se refleja en el sitemap en el siguiente build — sin un paso aparte que recordar, y sin URLs obsoletas apuntando a páginas eliminadas.