¿Qué es parallel routes?

Con la evolución de Next.js 14, una de las funcionalidades más poderosas que ha surgido es el Parallel Routes. Esta nueva característica permite renderizar múltiples layouts de manera simultánea, lo que es ideal cuando se necesita gestionar interfaces distintas dentro de una misma aplicación sin afectar el rendimiento o la estructura global. Uno de los casos de uso más interesantes es la gestión de diferentes interfaces según los roles de usuario, lo que proporciona una experiencia personalizada y adaptable.

Al permitir que una aplicación sirva múltiples rutas paralelas, cada una con su propio layout, el Parallel Routes mejora la modularidad y escalabilidad del código. Esto es especialmente útil en aplicaciones que requieren diversas experiencias de usuario según sus permisos, como por ejemplo administradores, clientes o invitados.

Ventajas de usar Parallel Routes

Implementar Parallel Routes para gestionar diferentes layouts basados en roles de usuario trae consigo numerosas ventajas:

• Escalabilidad: A medida que la aplicación crece, resulta mucho más fácil agregar nuevos roles o layouts sin necesidad de reestructurar grandes partes del código.
• Mejora de la experiencia de usuario: Cada rol de usuario recibe una interfaz optimizada para sus necesidades, lo que mejora la eficiencia y la usabilidad.
• Mantenimiento modular: Al separar las rutas y los layouts por roles, el mantenimiento y las actualizaciones se pueden realizar de manera aislada sin interferir en otras partes del proyecto.
• Rendimiento optimizado: Next.js 14 está diseñado para aprovechar la concurrencia y la renderización eficiente, por lo que el uso de rutas paralelas no sobrecarga el rendimiento.

Además, esta metodología permite trabajar de manera colaborativa en equipos grandes, donde diferentes desarrolladores pueden enfocarse en distintas áreas del proyecto sin riesgo de generar conflictos.

Ejemplo: Uso de Parallel Routes en una app de Delivery

Vamos a construir un ejemplo simple de una aplicación de delivery con dos roles principales: cliente y repartidor. Cada uno tendrá un layout y una interfaz personalizada.

Paso 1: Creación del proyecto en Next.js 14

Comenzamos creando un proyecto básico en Next.js 14:

npx create-next-app@latest delivery-app
cd delivery-app

Paso 2: Configuración de Parallel Routes

Vamos a estructurar el proyecto para que el Parallel Routes gestione diferentes layouts según el rol del usuario. La estructura de directorios será la siguiente:

/app
  /@client
    layout.tsx
    page.tsx
  /@delivery
    layout.tsx
    page.tsx
  layout.tsx

Cada subdirectorio contendrá el layout personalizado para clientes y repartidores, así como una página principal (home) para cada uno.

Paso 3: Layout para clientes y repartidores

Dentro de cada directorio, creamos un layout adecuado. Para los clientes, la interfaz podría incluir opciones para realizar pedidos y hacer seguimiento de los mismos.

// app/@client/layout.tsx

export default function ClientLayout({ children }) {
  return (
    <div>
      <header>App de Delivery - Cliente</header>
      <main>{children}</main>
    </div>
  );
}

El layout de los repartidores tendrá un enfoque diferente, mostrando información sobre los pedidos pendientes y las rutas a seguir.

// app/@delivery/layout.tsx

export default function DeliveryLayout({ children }) {
  return (
    <div>
      <header>App de Delivery - Repartidor</header>
      <main>{children}</main>
    </div>
  );
}

Paso 4: Decidir el layout según el rol del usuario

Ahora implementamos la lógica que determina qué layout mostrar según el rol del usuario. Supongamos que tenemos un objeto user que contiene la información del usuario autenticado:

// app/layout.tsx

import { ReactNode } from 'react'; 

type User = {
  role: 'client' | 'delivery'
};

const user: User = {
  // Este valor podría venir de un servicio de autenticación
  role: 'client', 
};

export default function LayoutRoot(
  { client, delivery } : 
  { client: ReactNode, delivery: ReactNode} 
) {
  
  if(user.role === 'client'){
    return client;
  }

  return delivery;
}

Aquí, dependiendo del rol (client o delivery), el usuario será redirigido al layout correspondiente. En una aplicación real, el rol se obtendría del estado de autenticación, de una API o de un servicio.

Paso 5: Personalización de las páginas

Finalmente, dentro de cada layout, las páginas también pueden estar personalizadas para cada rol. Por ejemplo, en el caso del cliente, podríamos tener una página con un listado de restaurantes y el estado de los pedidos.

// app/@client/page.tsx

export default function ClientPage() {
  return (
    <div>
      <h1>Bienvenido a la App de Delivery</h1>
      <p>Explora restaurantes, haz pedidos y sigue tu entrega en tiempo real.</p>
      <button onClick={() => alert('Navegando a la sección de restaurantes...')}>
        Ver Restaurantes
      </button>
    </div>
  );
}

Para los repartidores, la página puede mostrar una lista de pedidos a entregar y sus respectivas rutas.

// app/@delivery/page.tsx

export default function DeliveryPage() {
  return (
    <div>
      <h1>Panel del Repartidor</h1>
      <p>Gestiona tus entregas y sigue las rutas asignadas.</p>
      <button onClick={() => alert('Navegando a la sección de pedidos...')}>
        Ver Pedidos Pendientes
      </button>
    </div>
  );
}

Conclusión

El uso de Parallel Routes en Next.js 14 ofrece una solución robusta y eficiente para gestionar múltiples interfaces en una misma aplicación. En el caso de nuestra aplicación de delivery, hemos visto cómo se pueden personalizar los layouts para clientes y repartidores sin complicar la estructura del proyecto. Esta funcionalidad no solo mejora la modularidad del código, sino que también optimiza la experiencia del usuario, permitiendo interfaces dinámicas que se adaptan a las necesidades de cada rol.