Blog y Portafolio: Sitio web personal con Next.js 

A principios de 2023 aprendí React, una biblioteca de desarrollo frontend creada y mantenida por Meta (o Facebook, para los amigos).
React me pareció fácil de usar, y la idea de separar la interfaz en componentes facilitaba enormemente el mantenimiento y la escalabilidad.

Como ejemplo, podemos pensar que cada parte de la interfaz es una pieza de Lego que podemos usar o reemplazar en cualquier momento.

En ese momento tenía en mente dos objetivos:

1. Aprender Next.js, un framework de React.
2. Crear un portafolio para compartir mis proyectos e ideas.

Me gusta usar una comparación que leí hace tiempo: imaginemos a Iron Man. La persona dentro del traje es React; Next.js es el traje que le otorga superpoderes.
Como ejemplo, si queremos tener enrutamiento en React debemos instalar React Router DOM, mientras que en Next.js basta con crear carpetas.

Aprendiendo con un proyecto real

Una de las formas que más me gusta para aprender es creando proyectos. En este caso, busqué un portafolio web desde cero con Next.js y encontré uno en un canal de YouTube en inglés.

Cada día dedicaba una hora: veía una sección del vídeo, intentaba replicarla y, si me atascaba u olvidaba algo, volvía a repetir hasta lograrlo.

Lo más difícil para mí fueron los estilos, ya que no tenía experiencia con Tailwind (el framework usado en el video). Sin embargo, con el paso de los días se fue haciendo más fácil. Me gustó que permite estilizar con gran versatilidad, a diferencia de otros frameworks como Bootstrap que ya tienen componentes predefinidos.

Tecnologías y herramientas iniciales

El proceso duró aproximadamente tres meses y aprendí bastante:

• Pasar de iconos SVG a React Functional Components (RFC).
• Usar el Page Router.
• Componentes como Link o Image, que facilitan optimizar imágenes y la navegación.
• Librería Motion para animaciones.
• Integración con Tailwind.
• Herramientas como Canva para crear assets.

Al final, tenía un portafolio estático, pero no estaba conforme.

Más allá del portafolio: el blog

No estaba del todo conforme: quería algo más personal que reflejara parte de mí y me permitiera dar rienda suelta a otro pasatiempo el cual es la escritura.

Empecé creando una página de contacto usando:

• React Hook Form para validar datos.
• EmailJS para gestionar el envío de correos.
• Sonner para mostrar notificaciones.
• Toast para una animación ligera pero llamativa al lado del formulario.

Integrando un CMS

Tenía claro que necesitaba un CMS (Content Management System) para gestionar contenido sin tocar código cada vez que quisiera cambiar un proyecto o una imagen.

De forma breve, un CMS se apoya en tres pilares:

1. VPS o servicio en la nube para alojarlo.
2. Base de datos.
3. Almacén para objetos (archivos, imágenes, etc.).

Mis opciones fueron Outstatic, Tina, Payload, Strapi y Sanity.

Migrando de Next 13 a 14

La mayoría de estos CMS usaban el App Router, introducido oficialmente en Next 14. Así que, para mantener mi sitio actualizado, debía migrar de Next 13 a Next 14 y cambiar el Page Router por App Router.

Leí la documentación y parecía tan simple como ejecutar un comando… y así fue: en menos de un minuto todo estaba actualizado.
Lo complicado fue cambiar el enrutador:

• Creé una nueva estructura de carpetas.
• Coloqué la carpeta app dentro de src para mantener orden.
• Aprendí a trabajar con Server Components, lo que implicó segmentar algunos componentes que usaban animaciones o hooks como useState.

Dato curioso: era posible usar ambos enrutadores a la vez, lo que facilitó la migración progresiva.

Implementando Sanity

Elegí Sanity por su plan gratuito y porque no tendría que preocuparme por el mantenimiento de bases de datos ni contenedores de objetos.

La implementación fue rápida, aunque tuve un problema con los estilos: el panel del CMS entraba en conflicto con los de mi web. Lo solucioné envolviendo el CMS y la aplicación en carpetas separadas.

Tabla de contenido automática

Para la navegación en las páginas de posts y proyectos, quería que se generara una tabla de contenido de forma automática con los títulos de cada sección.

Me basé en la publicación How to Make a Table of Contents from Sanity Block Content de Abdurezak Farah, la cual explica cómo extraer los encabezados desde Sanity y convertirlos en una estructura jerárquica para renderizarlos como un listado con enlaces internos.

A partir de esa idea, adapté el código a mi proyecto y logré que cada vez que creo un post o proyecto, el sistema detecte los encabezados y construya automáticamente la tabla de contenido.

Cálculo del tiempo de lectura

Para estimar el tiempo de lectura de cada post, uso una fórmula muy simple en mi consulta a Sanity, para la cual investigue el promedio de palabras que lee una persona por minuto y el promedio de letras por palabra:

const wpm = 180; // Palabras por minuto promedio
const meanWordCharacterCount = 5; // Caracteres promedio por palabra

"estimatedReadingTime": round(
length(pt::text(description)) / meanWordCharacterCount / wpm
)

Esta línea toma la longitud total del texto (length(pt::text(description))), la divide entre el número promedio de caracteres por palabra y luego entre las palabras que una persona lee por minuto, posteriormente se redondea el valor para mostrar un número entero de minutos.

Recursos gráficos y de texto

Para las imágenes utilicé:

• Adobe Illustrator
• Canva
• LottieFiles
• unDraw

A excepción de Illustrator, todas son herramientas gratuitas y muy recomendables.

Para textos:

• Microsoft Word para los borradores.
• El editor enriquecido de Sanity para dar el formato final.

Conclusión

Este proyecto no solo me permitió aprender Next.js, Tailwind y la integración de un CMS, sino también a resolver problemas reales que no aparecen en la teoría.

Hoy, este portafolio/blog es una ventana para mostrar algunos de mis proyectos y compartir ideas y pensamientos, siendo una prueba de que aprender una tecnología desde cero es posible si se combina con constancia y poca (mucha en realidad) paciencia.