Cómo automatizar tu sitemap con Next JS

Nicolás Vega
Nicolás Vega
··

2 min de lectura

Cover Image for Cómo automatizar tu sitemap con Next JS

Crear un sitemap para tu sitio web es esencial para la SEO, ya que ayuda a los motores de búsqueda a encontrar e indexar tus páginas más fácilmente. En este post, te mostraré cómo puedes automatizar la generación de tu sitemap en un proyecto de Next.js.

Primero, crea un archivo llamado sitemap-generator.mjs en tu directorio /utils o en cualquier otro lugar que consideres adecuado.

Para empezar, necesitarás instalar globby, que te ayudará a encontrar todos los archivos de página en tu proyecto. Ejecuta el siguiente comando:

yarn add "globby": "^13.2.2"

Luego, en tu nuevo archivo /utils/sitemap-generator.mjs, añade el siguiente código:

import { writeFileSync } from "fs";
import { globby } from "globby";

async function generateMainSitemap() {
  const pages = await globby([
    "pages/*.tsx",
    "pages/**/*.tsx", --> todo lo que quieres sumar
    "!pages/ruta/[id]/index.tsx", --> todas las páginas que no quieras sumar
  ]);

  const sitemap = `
    <urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>" xmlns:news="<http://www.google.com/schemas/sitemap-news/0.9>" xmlns:xhtml="<http://www.w3.org/1999/xhtml>" xmlns:mobile="<http://www.google.com/schemas/sitemap-mobile/1.0>" xmlns:image="<http://www.google.com/schemas/sitemap-image/1.1>" xmlns:video="<http://www.google.com/schemas/sitemap-video/1.1>">
        ${pages
          .map((page) => {
            const path = page
              .replace("pages", "")
              .replace("data", "")
              .replace(".js", "")
              .replace(".tsx", "")
              .replace(".mdx", "");
            const route = path.endsWith("/index")
              ? path.replace("/index", "")
              : path;

            return `
              <url>
                  <loc>${`https://carvuk.com${route}`}</loc>
              </url>
            `;
          })
          .join("")}
    </urlset>
    `;

  writeFileSync("public/sitemap.xml", sitemap);
}

generateMainSitemap();

Este script buscará archivos en tu directorio pages, construirá una estructura XML para tu sitemap y lo escribirá en el archivo public/sitemap.xml.

Ahora, para asegurarte de que este script se ejecute automáticamente después de construir tu proyecto, añade el siguiente script a tu package.json:

{
  "private": true,
  "engines": {
    "node": ">=14.0.0",
    "yarn": ">=1.22.0",
    "npm": "please-use-yarn"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "node --experimental-modules ./lib/shared/utils/sitemap-generator.mjs",
    "start": "next start",
    "lint": "next lint",
    "prettier": "prettier --write ."
  },

Con estos pasos, cada vez que construyas tu proyecto, tu sitemap se actualizará automáticamente para reflejar los cambios más recientes en tu sitio. Y recuerda subir la URL de tu sitemap a Google Search Console!