Sobre React y Next.js

Next.js es un framework de React flexible que te proporciona bloques de construcción para crear aplicaciones web rápidas y full-stack.

Pero, ¿qué significa exactamente esto? Dediquemos un tiempo a explicar qué son React y Next.js y cómo pueden ayudarte a construir aplicaciones web.

Bloques de construcción de una aplicación web

Hay varios aspectos que debes considerar al construir aplicaciones modernas, como:

  • Interfaz de usuario (UI) - cómo los usuarios consumirán e interactuarán con tu aplicación.
  • Enrutamiento (Routing) - cómo los usuarios navegan entre diferentes partes de tu aplicación.
  • Obtención de datos (Data Fetching) - dónde residen tus datos y cómo obtenerlos.
  • Renderizado (Rendering) - cuándo y dónde renderizar contenido estático o dinámico.
  • Integraciones - qué servicios de terceros utilizas (para CMS, autenticación, pagos, etc.) y cómo te conectas a ellos.
  • Infraestructura - dónde implementas, almacenas y ejecutas el código de tu aplicación (serverless, CDN, edge, etc.).
  • Rendimiento - cómo optimizar tu aplicación para los usuarios finales.
  • Escalabilidad - cómo se adapta tu aplicación a medida que crecen tu equipo, datos y tráfico.
  • Experiencia del desarrollador - la experiencia de tu equipo al construir y mantener tu aplicación.

Para cada parte de tu aplicación, deberás decidir si construyes una solución propia o utilizas otras herramientas como paquetes, bibliotecas y frameworks.

¿Qué es React?

React es una biblioteca JavaScript para construir interfaces de usuario interactivas.

Por interfaces de usuario (UI), nos referimos a los elementos que los usuarios ven y con los que interactúan en pantalla.

Ejemplo de interfaz de usuario mostrando una ventana de navegador con una barra de navegación, una barra lateral y una lista de publicaciones

Por biblioteca, entendemos que React proporciona funciones útiles (APIs) para construir UI, pero deja en manos del desarrollador dónde usar esas funciones en su aplicación.

Parte del éxito de React radica en que es relativamente poco opinado sobre otros aspectos de la construcción de aplicaciones. Esto ha resultado en un floreciente ecosistema de herramientas y soluciones de terceros, incluyendo Next.js.

Sin embargo, también significa que construir una aplicación React completa desde cero requiere cierto esfuerzo. Los desarrolladores necesitan dedicar tiempo a configurar herramientas y reinventar soluciones para requisitos comunes de aplicaciones.

¿Qué es Next.js?

Next.js es un framework de React que te proporciona bloques de construcción para crear aplicaciones web.

Por framework, entendemos que Next.js maneja las herramientas y configuraciones necesarias para React, y proporciona estructura adicional, características y optimizaciones para tu aplicación.

Diagrama que muestra cómo Next.js abarca el servidor y el cliente, y proporciona características adicionales como enrutamiento, obtención de datos y renderizado.

Puedes usar React para construir tu UI, y luego adoptar gradualmente las características de Next.js para resolver requisitos comunes de aplicaciones como enrutamiento, obtención de datos y almacenamiento en caché, todo mientras mejoras la experiencia del desarrollador y del usuario final.

Ya seas un desarrollador individual o parte de un equipo más grande, puedes usar React y Next.js para construir aplicaciones web completamente interactivas, altamente dinámicas y con buen rendimiento.

En los próximos capítulos, discutiremos cómo puedes comenzar con React y Next.js.