Adopción incremental de Next.js

Next.js ha sido diseñado para una adopción gradual. Con Next.js, puedes seguir utilizando tu código existente y añadir tanto React como necesites (o tan poco). Al comenzar con pequeños cambios e ir añadiendo más páginas de forma incremental, puedes evitar interrumpir el desarrollo de funcionalidades al eludir una reescritura completa.

Muchas empresas necesitan modernizar su stack tecnológico para reducir costos, aumentar la productividad de los desarrolladores y ofrecer la mejor experiencia a sus clientes. El desarrollo basado en componentes ha mejorado enormemente la velocidad de despliegue y la reutilización en bases de código modernas.

Y con más de 8 millones de descargas/mes, React es la opción líder en desarrollo basado en componentes. Next.js, el framework de React para producción, te permite adoptar React de forma incremental.

Motivación

En un mundo cada vez más móvil, mejorar y monitorear tus Core Web Vitals es crucial para el éxito. Es probable que tus clientes estén distribuidos por todo el mundo con velocidades de internet variables. Cada segundo (o milisegundo) adicional que esperan para que una página cargue o se complete una acción puede marcar la diferencia entre una venta, una impresión o una conversión.

Si estás modernizando tu stack tecnológico, podrías enfrentar desafíos como:

• Tu aplicación tiene años de código heredado que es difícil de entender y llevaría años (y millones de dólares) reescribir completamente.
• Los tiempos de carga de tus páginas siguen aumentando a medida que crece el tamaño y complejidad de la aplicación. Páginas simples de marketing son tan lentas como las páginas más complejas.
• Estás intentando escalar tu equipo de desarrollo, pero enfrentas problemas al añadir más desarrolladores a la base de código existente.
• Tienes procesos obsoletos de CI/CD y DevOps, lo que disminuye la productividad y dificulta implementar cambios nuevos de forma segura y confiable.
• Tu aplicación no es responsive para dispositivos móviles y es imposible actualizar los estilos globales sin romper otras partes de la aplicación.

Sabes que necesitas hacer algo, pero puede ser abrumador entender por dónde empezar. Al adoptar Next.js de forma incremental, puedes comenzar a resolver estos problemas y transformar tu aplicación. Analicemos algunas estrategias para integrar Next.js en tu stack tecnológico existente.

Estrategias

Subruta

La primera estrategia es configurar tu servidor o proxy para que todo bajo una subruta específica apunte a una aplicación Next.js. Por ejemplo, tu sitio web existente podría estar en example.com, y podrías configurar tu proxy para que example.com/tienda sirva una tienda e-commerce con Next.js.

Usando basePath, puedes configurar los assets y enlaces de tu aplicación Next.js para que funcionen automáticamente con tu nueva subruta /tienda. Como cada página en Next.js es su propia ruta independiente, páginas como pages/productos.js se enrutarán a example.com/tienda/productos en tu aplicación.

module.exports = {
  basePath: '/tienda',
};

Para aprender más sobre basePath, consulta nuestra documentación.

(Nota: Esta funcionalidad se introdujo en Next.js 9.5 y versiones posteriores. Si usas versiones anteriores, actualiza antes de probarla.)

Rewrites

La segunda estrategia es crear una nueva aplicación Next.js que apunte a la URL raíz de tu dominio. Luego, puedes usar rewrites en next.config.js para que algunas subrutas sean proxyadas a tu aplicación existente.

Por ejemplo, supongamos que creaste una aplicación Next.js para servir desde example.com con el siguiente next.config.js. Ahora, las solicitudes para las páginas que hayas añadido a esta aplicación Next.js (ej. /about si añadiste pages/about.js) serán manejadas por Next.js, y las solicitudes para cualquier otra ruta (ej. /dashboard) serán proxyadas a proxy.example.com.

module.exports = {
  async rewrites() {
    return [
      // necesitamos definir un rewrite sin efecto para activar la verificación
      // de todas las páginas/archivos estáticos antes de intentar el proxy
      {
        source: '/:path*',
        destination: '/:path*',
      },
      {
        source: '/:path*',
        destination: `https://proxy.example.com/:path*`,
      },
    ];
  },
};

Para aprender más sobre rewrites, consulta nuestra documentación.

Micro-frontends con Monorepos y Subdominios

Next.js y Vercel facilitan la adopción de micro-frontends y el despliegue como Monorepo. Esto te permite usar subdominios para adoptar nuevas aplicaciones de forma incremental. Algunos beneficios de los micro-frontends:

• Bases de código más pequeñas, cohesivas y mantenibles.
• Organizaciones más escalables con equipos autónomos y desacoplados.
• Capacidad para actualizar o incluso reescribir partes del frontend de forma más incremental.

Arquitectura de un monorepo desplegado en Vercel.

Una vez configurado tu monorepo, envía cambios a tu repositorio Git como siempre y verás los commits desplegados en los proyectos de Vercel que hayas conectado. Di adiós a los procesos obsoletos de CI/CD.

Ejemplo de URLs de despliegue proporcionadas por una integración con Git.

Conclusión

Next.js fue diseñado para una adopción incremental en tu stack tecnológico existente. La plataforma Vercel lo convierte en una experiencia colaborativa con vistas previas de despliegue para cada cambio, integrando perfectamente con GitHub, GitLab y Bitbucket.

• Previsualiza cambios al instante localmente con Fast Refresh, aumentando la productividad.
• Envía cambios para crear un Branch Preview, optimizado para colaboración con stakeholders.
• Despliega en producción con Vercel al fusionar el PR. Sin DevOps complicados.

Para aprender más, lee sobre subrutas y rewrites o despliega un ejemplo con micro-frontends.