Generar un sitemap.xml dinámico con Next.js

Tiempo de lectura: < 1 minuto

Hoy vamos a aprender cómo podemos generar un sitemap.xml de forma dinámica con Next.js esto es muy útil si tenemos links separados de cada uno de nuestros artículos y queremos generar su sitemap.xml. Con esta técnica mejoraremos mucho el SEO de nuestra web y ayudaremos a los buscadores a indexar correctamente nuestra web.

Lo primero que haremos es crear un archivo llamado sitemap.xml.tsx.

const EXTERNAL_DATA_URL = 'https://jsonplaceholder.typicode.com/posts';

function generateSiteMap(posts) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <!--We manually set the two URLs we know already-->
     <url>
       <loc>https://jsonplaceholder.typicode.com</loc>
     </url>
     <url>
       <loc>https://jsonplaceholder.typicode.com/guide</loc>
     </url>
     ${posts
       .map(({ id }) => {
         return `
       <url>
           <loc>${`${EXTERNAL_DATA_URL}/${id}`}</loc>
           <changefreq>monthly</changefreq>
           <priority>0.5</priority>
       </url>
     `;
       })
       .join('')}
   </urlset>
 `;
}

function SiteMap() {
  // getServerSideProps will do the heavy lifting
}

export async function getServerSideProps({ res }) {
  // We make an API call to gather the URLs for our site
  const request = await fetch(EXTERNAL_DATA_URL);
  const posts = await request.json();

  // We generate the XML sitemap with the posts data
  const sitemap = generateSiteMap(posts);

  res.setHeader('Content-Type', 'text/xml');
  // we send the XML to the browser
  res.write(sitemap);
  res.end();

  return {
    props: {},
  };
}

export default SiteMap;

En este ejemplo vamos a generar un sitemap.xml utilizando datos de ejemplo. Necesitarás crear tus propias querys para que recorran cada uno de tus artículos y generes su URL.

Cuándo visitemos nuestraweb/sitemap.xml nos mostrará las páginas añadidas al índice.

Recuerda que el máximo de URLS por archivo sitemap.xml son 50.000.