logo studio roma
EN / ES

Back to Blog

Sitemaps

Pablo Romera foto

Pablo Romera 

/

 September 07, 2023 / 4 min read

Pablo Romera foto

Generación Eficiente de Sitemaps en Next.js

Introducción: La Importancia de los sitemaps en el Desarrollo Web Moderno

En el competitivo espacio en línea de hoy, garantizar que tu sitio web obtenga la visibilidad que merece es crucial. Un mapa de sitio juega un papel indispensable en esto. Para aquellos que utilizan Next.js para sus necesidades de desarrollo web, integrar un mapa de sitio de manera eficiente es de suma importancia. Esta guía te guiará a través del proceso utilizando el paquete npm, conocido por su amplio rango de funcionalidades y soporte de código fácil de integrar.

La Guía Exclusiva para la Generación de sitemaps en Next.js con npm

1. Configuración Inicial: Entendiendo los Conceptos Básicos

Antes de sumergirse, es esencial estar armado con una comprensión básica de la creación de aplicaciones Next.js y los fundamentos de npm y Next.js. Esta guía asume que ya estás equipado con este conocimiento, así que nos centraremos únicamente en el proceso de creación del mapa de sitio.

2. Comienza con la Instalación del Paquete NPM

El primer paso es incorporar el paquete npm next-sitemap. Es una herramienta poderosa que ha sido especialmente diseñada para proyectos como el tuyo. Instálalo como una dependencia de desarrollo (-D) usando el siguiente comando:

npm i next-sitemap -D

Siempre puedes referirte a la documentación oficial para un entendimiento detallado.

3. Profundizando en la Configuración

Una vez instalado el paquete, el siguiente paso es integrarlo sin problemas en tu proyecto. La configuración se hace sin esfuerzo con Next.js. Así es como se hace:

  • Configurando el Paquete NPM

Comienza creando un nuevo archivo llamado next-sitemap.js dentro de la carpeta principal de tu proyecto. Llénalo con el código predeterminado que se proporciona a continuación, asegurándote de modificarlo según las especificidades de tu sitio web:

module.exports = {
  siteUrl: "https://www.example.com",
  generateRobotsTxt: true,
  outDir: "./out",
};

Crea otro archivo llamado next-sitemap.config.js dentro de la carpeta principal de tu proyecto. Llénalo con el código predeterminado que se proporciona a continuación, asegurándote de modificarlo según las especificidades de tu sitio web:

module.exports = {
  siteUrl: "https://www.example.com",
  generateRobotsTxt: true,
};
  • Incorporando el Script NPM

La configuración no se trata solo del paquete; también se trata de asegurarse de que los scripts estén configurados correctamente. Agrega el siguiente script a tu archivo package.json:

"postbuild": "next-sitemap --config next-sitemap.config.js --sitemap-xml",
"sitemap": "next-sitemap --config next-sitemap.config.js"

Este script garantiza que el mapa del sitio se genere después del proceso de construcción, asegurando su relevancia y precisión.

4. El Gran Final: Generando el Mapa del Sitio

Con las configuraciones establecidas, ahora estás listo para generar el mapa del sitio para tu proyecto Next.js. Simplemente usa el comando:

npm run build

Al ejecutar este comando, se generará el archivo sitemap.xml para tu proyecto, preparándolo para guiar a los motores de búsqueda a través de tu contenido. Es importante mencionar que el paquete next-sitemap podría producir múltiples archivos de mapa del sitio, como sitemap.xml (archivo índice principal) y sitemap-0.xml (un subarchivo). Sus nombres pueden ser personalizados según tus requerimientos. Si queremos evitar la generación de múltiples archivos, deberemos agregar al next-sitemap.config.js la última línea.

module.exports = {
  siteUrl: "https://www.example.com",
  generateRobotsTxt: true,
  generateIndexSitemap: false,
};

Consulta la documentación para obtener más información sobre esto.

5. Una Palabra de Precaución

Siempre ejecuta el comando npm run build seguido del comando npm run postbuild para una ejecución impecable. Evita ejecutar el comando npm run postbuild directamente en tu aplicación Next.js. Hacerlo puede resultar en errores. Recuerda, aunque el comando postbuild es opcional, el paquete npm next-sitemap está diseñado para generar automáticamente un mapa del sitio con el comando de construcción.

Conclusión: Abrazando la Eficiencia y Visibilidad con Next.js y npm

Optimizar tu sitio web para los motores de búsqueda va más allá de simplemente tener contenido de calidad; se trata de asegurarse de que ese contenido sea fácilmente descubrible. Al integrar un mapa del sitio de manera eficiente usando el paquete npm en Next.js, posicionas tu plataforma web para una mayor visibilidad y tráfico. Aunque otros métodos podrían proporcionar resultados similares, la flexibilidad y robustez ofrecidas por el paquete npm next-sitemap siguen siendo inigualables.