What is Parallel Routes?

With the evolution of Next.js 14, one of the most powerful features that has emerged is the Parallel Routes. This new feature allows rendering multiple layouts simultaneously, which is ideal when managing distinct interfaces within the same application without affecting overall performance or structure. One of the most interesting use cases is managing different interfaces based on user roles, providing a personalized and adaptable experience.

By allowing an application to serve multiple parallel routes, each with its own layout, the Parallel Routes enhances the modularity and scalability of the code. This is especially useful in applications that require diverse user experiences based on their permissions, such as administrators, clients, or guests.

Advantages of Using Parallel Routes

Implementing Parallel Routes to manage different layouts based on user roles comes with numerous advantages:

• Scalability: As the application grows, it becomes much easier to add new roles or layouts without needing to restructure large parts of the code.
• Improved User Experience: Each user role receives an interface optimized for their needs, enhancing efficiency and usability.
• Modular Maintenance: By separating routes and layouts by roles, maintenance and updates can be performed in isolation without interfering with other parts of the project.
• Optimized Performance: Next.js 14 is designed to take advantage of concurrency and efficient rendering, so using parallel routes does not overload performance.

Additionally, this methodology allows for collaborative work in large teams, where different developers can focus on distinct areas of the project without the risk of generating conflicts.

Example: Using Parallel Routes in a Delivery App

We will build a simple example of a delivery application with two main roles: client and delivery person. Each will have a custom layout and interface.

Step 1: Creating the project in Next.js 14

We start by creating a basic project in Next.js 14:

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

Step 2: Setting up Parallel Routes

We will structure the project so that the Parallel Routes manages different layouts based on the user role. The directory structure will be as follows:

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

Each subdirectory will contain the custom layout for clients and delivery personnel, as well as a main page (home) for each.

Step 3: Layout for Clients and Delivery Personnel

Within each directory, we create an appropriate layout. For clients, the interface might include options to place orders and track them.

// app/@client/layout.tsx

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

The layout for delivery personnel will have a different focus, displaying information about pending orders and the routes to follow.

// app/@delivery/layout.tsx

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

Step 4: Deciding the Layout Based on User Role

Now we implement the logic that determines which layout to display based on the user's role. Let's assume we have a user object that contains the information of the authenticated user:

// 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;
}

Here, depending on the role (client or delivery), the user will be redirected to the corresponding layout. In a real application, the role would be obtained from the authentication state, an API, or a service.

Step 5: Customizing the Pages

Finally, within each layout, the pages can also be customized for each role. For example, in the case of the client, we could have a page with a list of restaurants and the status of their orders.

// 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>
  );
}

For delivery personnel, the page can display a list of orders to be delivered and their respective routes.

// 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>
  );
}

Conclusion

The use of Parallel Routes in Next.js 14 provides a robust and efficient solution for managing multiple interfaces within a single application. In the case of our delivery application, we have seen how layouts can be customized for both clients and delivery personnel without complicating the project's structure. This functionality not only enhances the modularity of the code but also optimizes the user experience, allowing for dynamic interfaces that adapt to the needs of each role.