Parallel Routes in Next.js

Parallel routes is a powerful feature in Next.js. It allows you to render one or more independent pages in the same layout.

Slots

The parallel routes are called slots. Slots are passed as props to the parent layout. Slots are defined with the @foldername convention.

---

How to Create Parellel Routes

Step 1: Make Folder Structure

parallel-routes/app/
├── components/
│   ├── Footer.tsx
│   └── Header.tsx
├── dashboard/
│   ├── @oldusers/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── globals.css
├── layout.tsx
└── page.tsx

To make the dashboard route accessible, create a page.tsx file in the dashboard directory. Define your individual slots under the dashboard directory. For every individual slot create a page.tsx file in it.

---

Step 2: Define slots in the layout.

Inject your slots in the dashboard's layout. As slots are received as props destructure and use them in the layout.

export default function Dashboard ({children ,oldusers}: {
  children: React.ReactNode;
  oldusers: React.ReactNode;
}) {
  return(
    <>
    <main className="h-screen flex items-center justify-center">
      {children}
      {oldusers}
    </main>
    </>
  )
}

Now you should see your dashboard and slots by navigating .../dashboard. But one interesting thing you may notice is. In your browser's URL, there is no balance or other slots routes in the URL. Because slots does not act as a path.
If you want to create more slots, inject them into your layout.

export default function Dashboard ({children ,oldusers, newusers}: {
  children: React.ReactNode;
  oldusers: React.ReactNode;
  newusers: React.ReactNode;
}) {
  return(
    <>
    <main>
      {children}
      {oldusers}
      {newusers}
    </main>
    </>
  )
}

---

Handling error and loading for slots

In Next.js gives flexibility in handling errorandloading. To handleerrorandloadingfor apagewe have to createerror.tsxandloading.tsxin the same directory as thatpage.Solotsare individualpage, we can handleerrorandloadingfor everyslotseparately.
Createerror.tsxin youslots(@balance`) directory.

`
'use client'

import { useEffect } from "react";

const Error = ({ error, reset }) => {
useEffect(() => {
console.error(error)
}, [error])

return (

Something went wrong!

Reason: {error.message}

className="bg-black text-white p-1 rounded-md m-auto"
onClick={() => reset()}
>
Try again


);
};

export default Error;

`
You can handle your component as you want.

---

Create routes for slots

Step 1: Import Link

`
import Link from 'next/link'

`

Step 2: Create a Link Component. That will redirect to the page.

`
import Link from 'next/link'

New Users

`

Step 3: Where to create the new page.

If you think our route is /dashboard/newusers/ so you have to create a directory under dashboard and a page in it. Then you are wrong. You have to create a directory in the slot from where the user can go to the route.
In our case, we have a slot named oldusers. We will make a folder newusers and a page in the oldusers directory. As we do for creating routes in Next.js.
Now you can go to the newusers page from the oldusers slot by clicking the Link/button.

Step 4: 404 Not found page.

When users reload on /dashboard/newusers/ page. Users will be redirected to the Not found page. To prevent this issue, we need to use the default.js/jsx/tsx.. file in our directory.
In the parent(dashboard) create a default.tsx file. And style it as it looks like with all slots. Also, we need to use the default.tsx component for every single slot where there are new routes are available. The default.tsx component will look like the slot looks.

`
app/
├── dashboard/
│ ├── layout.tsx
│ ├── page.tsx

│ ├── default.tsx

│ ├── @oldusers/

│ │ ├── default.tsx

│ │ └── newusers/

│ │ └── page.tsx

│ └── @anotherSlot/

│ └── default.tsx

`

Now users if users refresh or directly access the /dashboard/newusers/ link, they will see your pages/slots.

---