Usando Parallel Routes para la gestión dinámica de múltiples interfaces en Next.js

Con la evolución de Next.js 14, una de las funcionalidades más potentes que surgió son las Parallel Routes. Esta nueva feature permite renderizar múltiples layouts simultáneamente, lo cual es ideal para manejar interfaces distintas dentro de la misma aplicación sin afectar el rendimiento ni la estructura general. Uno de los casos de uso más interesantes es gestionar diferentes interfaces según el rol del usuario, brindando una experiencia personalizada y adaptable.

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

Implementar Parallel Routes para manejar distintos layouts según el rol del usuario trae numerosas ventajas:

• Escalabilidad: A medida que la aplicación crece, es mucho más fácil agregar nuevos roles o layouts sin reestructurar grandes partes del código.
• Mejor experiencia de usuario: Cada rol recibe una interfaz optimizada para sus necesidades, mejorando eficiencia y usabilidad.
• Mantenimiento modular: Al separar rutas y layouts por roles, el mantenimiento y las actualizaciones se pueden hacer de forma aislada sin interferir con otras partes del proyecto.
• Rendimiento optimizado: Next.js 14 está diseñado para aprovechar la concurrencia y el renderizado eficiente, por lo que usar parallel routes no sobrecarga el rendimiento.

Además, esta metodología permite trabajo colaborativo en equipos grandes, donde distintos desarrolladores pueden enfocarse en áreas separadas del proyecto sin riesgo de generar conflictos.

Construiremos un ejemplo simple de una aplicación de delivery con dos roles principales: cliente y repartidor. Cada uno tendrá un layout e interfaz personalizados.

Paso 1: Crear el proyecto en Next.js 14

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

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

Paso 2: Configurar Parallel Routes

Estructuramos el proyecto para que Parallel Routes maneje distintos 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, además de una página principal (home) para cada uno.

Paso 3: Layout para clientes y repartidores

Dentro de cada directorio, creamos un layout apropiado. Para clientes, la interfaz podría incluir opciones para hacer pedidos y seguirlos.

// app/@client/layout.tsx

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

El layout para repartidores tendrá un foco distinto, mostrando información sobre 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

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

// app/layout.tsx

import { ReactNode } from 'react'; 

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

const user: User = {
  // This value could come from an authentication service
  role: 'client', 
};

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

  return delivery;
}

Aquí, según el rol (cliente o repartidor), el usuario será dirigido al layout correspondiente. En una aplicación real, el rol se obtendría del estado de autenticación, una API o un servicio.

Paso 5: Personalizar las páginas

Finalmente, dentro de cada layout, las páginas también pueden personalizarse por rol. Por ejemplo, para el cliente podríamos tener una página con lista de restaurantes y el estado de sus pedidos.

// app/@client/page.tsx

export default function ClientPage() {
  return (
    <div>
      <h1>Welcome to the Delivery App</h1>
      <p>Explore restaurants, place orders, and track your delivery in real-time.</p>
      <button onClick={() => alert('Navigating to the restaurants section...')}>
        View Restaurants
      </button>
    </div>
  );
}

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

// app/@delivery/page.tsx

export default function DeliveryPage() {
  return (
    <div>
      <h1>Delivery Person Panel</h1>
      <p>Manage your deliveries and track the assigned routes.</p>
      <button onClick={() => alert('Navigating to the orders section...')}>
        View Pending Orders
      </button>
    </div>
  );
}

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