How to use parallel routing to build complex routing pattern in Next.js

Question

Introduction

Parallel route is a term for a technique in the Next.js framework. It's the process that allows rendering one or more pages simultaneously or based on a specific condition within the same layout.
This concept is used in building dashboards to display multiple pages within a single dashboard, such as displaying the Teams page and the Analytics page, or in building modals that can be shared via URL.

How parallel routes render multiple sub-pages into a single parent layout. Source: Next doc

Create Parallel Route
parallel route is created by creating a folder called slots, written like this: @folder. Note: The @folder is created at the same level as the layout.tsx file.

file structure defines two explicit slots: @analytics and @team. Source: Next doc*

After creating @folder file, for example @team, containing a page named page.tsx, the slots for the rootlayout are added as props. It's worth noting that in Next.js, the rootlayout renders children.

// app/layout.tsx
export default function Layout(props: {
  children: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <>
      {props.children}
      {props.team}  
    </>
  )
}

loading.tsx & error.tsx files
parallel route allows for the creation of a loading and error file specific to each slot, to display a loading spinner or error page for each route individually.

default.tsx file
The content of the slot that matches the URL, for example: en/team/members, is rendered. This is normal behavior. However, if there is no match between the slot and the URL, a fallback is needed to avoid the common 404 page not found error.

parallel route relies on the current layout. If the user navigates to a route that doesn't contain a dedicated page within the slot, Next.js searches for the default file to render it as a fallback. If the page refreshes, Next.js searches for the default.tsx file. If it's not there, it returns a 404 error page. It contains:

// default.tsx
export default function Default() {
return null
}

Usage

1. Modals

The importance of the parallel route lies in its ability to create overlay modals, similar to those found on Instagram. For example, when you click on an image, its details are displayed while the feed continues to run in the background. The link changes to something like /photo/flower. If you share the image link, the full image details are displayed, and the feed disappears from the background.

1. Complex Dashboards

As mentioned previously, you can display two or more pages on the same dashboard page, each with its own loading.tsx file, and each page's content is separate from the others.

1. Role-Based & Conditional Access

You can display different pages in the same layout based on the user. For example, if the user is an admin, you display the admin page, and if they are a member, you display the members page.
Within the layout page, the user session is checked, and the appropriate slot is returned.

export default function Layout(props: {
children: React.ReactNode
teamMember: React.ReactNode
admin: React.ReactNode
}) {
const role = getUserRole(); // Server-side check

return (
<div className="dashboard-wrapper">
{props.children}

{role === 'admin' ? props.admin : props.teamMember}

</div>

)
}

When should I use parallel route?

To determine this, you must answer certain questions such as:
1-Are there specific pages that I need to display on a single page?

2-Is there a component that needs to be displayed in a window above the main page without needing to close or disappear it?

3-Are there components in the same view whose display depends on the user's status (admin or regular user)?

References
Next.js
Medium