AlanJereb.com
Programación

Reescritura del blog - migración de Gatsby.js a Next.js

Oct 3rd, 2023

Después de un breve descanso, estoy emocionado de volver con una nueva entrada en el blog. Como habrás notado, esta es diferente de los habituales contenidos de viajes y fotografía. Gracias al consejo de mi esposa, he decidido diversificar los temas que trato aquí en el blog. Mi blog, mis reglas.

En la entrada de hoy, te guiaré a través de algunos cambios recientes que he realizado en el blog.

Adiós a Gatsby.js, hola Next.js

Adiós a Gatsby.js, hola Next.js

Tras bastidores, le he dado al blog una transformación completa. Dije adiós a Gatsby.js y abracé la tecnológicamente avanzada Next.js. Además, cambié el Sistema de Gestión de Contenidos (CMS) de Contentful al altamente flexible Sanity CMS.

No te aburriré con los detalles técnicos de estas transiciones, ya que hay mucho contenido disponible al respecto. Sin embargo, si tienes preguntas sobre la migración de Gatsby.js a Next.js o sobre el cambio de Contentful a Sanity, no dudes en enviarme un mensaje en Twitter, y haré todo lo posible para ayudarte.

Ahora, adentrémonos en los cambios

Cambios en el backend:

  • Webhook de Revalidación de Sanity: Configuré un webhook de revalidación de Sanity para asegurarme de que la caché se actualice automáticamente después de publicar nuevo contenido.
  • Traducciones: He añadido claves para admitir el idioma inglés.
  • Duplicación de la base de datos: He añadido una función para duplicar la base de datos de producción en mi entorno de desarrollo, de manera que siempre trabaje con una copia fresca del sitio web durante el desarrollo.
Migración de la base de datos del estudio de Sanity de producción a desarrollo y viceversa

Migración de la base de datos del estudio de Sanity de producción a desarrollo y viceversa

  • Magia en el Lado del Servidor: He aprovechado las capacidades de representación en el lado del servidor de Next.js para mejorar el rendimiento, trasladando muchos componentes al SSR para una experiencia más rápida.
  • Actualización del Esquema de la Base de Datos: He actualizado los esquemas para acomodar etiquetas y palabras clave.

Cambios en el frontend:

  • Botón de Volver Arriba: He corregido un error que hacía que el botón de "Volver Arriba" se mostrara incorrectamente en pantallas más pequeñas.
  • Colores de Acento: Ajusté los colores de acento para una mejor legibilidad sobre fondo blanco.
Tres nuevos colores para los enlaces

Tres nuevos colores para los enlaces

  • Claves Predecibles: He reemplazado el uso de math.random() en componentes JSX con claves más predecibles y consistentes.
Ejemplo de cambios

Ejemplo de cambios

  • Mejoras en el CSS: Se han abordado varias cuestiones de CSS y se han realizado optimizaciones de rendimiento.
  • Renovación del Lightbox: Se ha mejorado el método de representación del lightbox para asegurarse de que no se rompa, incluso si los recursos externos no se cargan.

Próximas novedades:

  • Filtrado por etiquetas de categoría: Pronto podrás filtrar el contenido por etiquetas de categoría. | Implementado - 2023.10.25
  • Paginación: Actualmente estoy trabajando en la implementación de la paginación para una experiencia de navegación más fluida.
  • Nuevos idiomas: En el futuro, habrá traducciones al español, francés e italiano para hacer que el contenido sea más accesible para un público más amplio. | Implementado - 2023.10.24
  • Despedida de Social Beaver: El proyecto Social Beaver dejará de estar en línea, y su enlace será reemplazado por una entrada detallada de descripción del proyecto. | Implementado - 2024.04.22
  • Filtrado de entradas relacionadas: Esta característica mostrará solo las entradas con etiquetas relacionadas cuando haya más contenido en el blog.

Mantente atento a estos emocionantes desarrollos y, como siempre, gracias por ser parte de este viaje.