Zonas múltiples (Multi-Zones)

Las Multi-Zonas son un enfoque de micro-frontends que divide una aplicación grande en un dominio en aplicaciones Next.js más pequeñas, donde cada una sirve un conjunto de rutas. Esto es útil cuando hay colecciones de páginas no relacionadas con otras páginas de la aplicación. Al mover esas páginas a una zona separada (es decir, una aplicación separada), puedes reducir el tamaño de cada aplicación, lo que mejora los tiempos de compilación y elimina código que solo es necesario para una de las zonas.

Por ejemplo, supongamos que tienes el siguiente conjunto de páginas que deseas dividir:

• /blog/* para todas las entradas del blog
• /dashboard/* para todas las páginas cuando el usuario ha iniciado sesión en el panel
• /* para el resto de tu sitio web no cubierto por otras zonas

Con el soporte de Multi-Zonas, puedes crear tres aplicaciones que se sirvan en el mismo dominio y parezcan iguales para el usuario, pero puedes desarrollar y desplegar cada una de las aplicaciones de forma independiente.

Navegar entre páginas de la misma zona realizará navegaciones suaves, una navegación que no requiere recargar la página. Por ejemplo, en este diagrama, navegar de / a /products será una navegación suave.

Navegar de una página en una zona a una página en otra zona, como de / a /dashboard, realizará una navegación dura, descargando los recursos de la página actual y cargando los recursos de la nueva página. Las páginas que se visitan frecuentemente juntas deberían estar en la misma zona para evitar navegaciones duras.

Cómo definir una zona

No hay APIs especiales para definir una nueva zona. Una zona es una aplicación Next.js normal donde también configuras un basePath para evitar conflictos con páginas y archivos estáticos en otras zonas.

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/blog',
}

La aplicación por defecto que manejará todas las rutas no enviadas a una zona más específica no necesita un basePath.

Los recursos de Next.js, como JavaScript y CSS, también tendrán prefijo con basePath para asegurar que no entren en conflicto con recursos de otras zonas. Estos recursos se servirán bajo /basePath/_next/... para cada una de las zonas.

Si la zona sirve páginas que no comparten un prefijo de ruta común, como /home y /blog, entonces también puedes configurar assetPrefix para asegurar que todos los recursos de Next.js se sirvan bajo un prefijo de ruta único para la zona sin añadir un prefijo de ruta al resto de las rutas en tu aplicación.

Cómo enrutar solicitudes a la zona correcta

Con la configuración de Multi-Zonas, necesitas enrutar las rutas a la zona correcta ya que son servidas por diferentes aplicaciones. Puedes usar cualquier proxy HTTP para hacer esto, pero una de las aplicaciones Next.js también puede usarse para enrutar solicitudes para todo el dominio.

Para enrutar a la zona correcta usando una aplicación Next.js, puedes usar rewrites. Para cada ruta servida por una zona diferente, añadirías una regla de reescritura para enviar esa ruta al dominio de la otra zona. Por ejemplo:

async rewrites() {
    return [
        {
            source: '/blog',
            destination: `${process.env.BLOG_DOMAIN}/blog`,
        },
        {
            source: '/blog/:path+',
            destination: `${process.env.BLOG_DOMAIN}/blog/:path+`,
        }
    ];
}

destination debe ser una URL servida por la zona, incluyendo esquema y dominio. Esto debería apuntar al dominio de producción de la zona, pero también puede usarse para enrutar solicitudes a localhost en desarrollo local.

Bueno saber: Las rutas URL deben ser únicas para una zona. Por ejemplo, dos zonas intentando servir /blog crearían un conflicto de enrutamiento.

Enlaces entre zonas

Los enlaces a rutas en una zona diferente deben usar una etiqueta a en lugar del componente <Link> de Next.js. Esto es porque Next.js intentará precargar y navegar suavemente a cualquier ruta relativa en el componente <Link>, lo cual no funcionará entre zonas.

Compartir código

Las aplicaciones Next.js que componen las diferentes zonas pueden estar en cualquier repositorio. Sin embargo, a menudo es conveniente poner estas zonas en un monorepo para compartir código más fácilmente. Para zonas que están en diferentes repositorios, el código también puede compartirse usando paquetes NPM públicos o privados.

Dado que las páginas en diferentes zonas pueden lanzarse en momentos diferentes, las banderas de características pueden ser útiles para activar o desactivar funcionalidades de forma coordinada entre las diferentes zonas.

Para aplicaciones Next.js en Vercel, puedes usar un monorepo para desplegar todas las zonas afectadas con un solo git push.