What Are Parallel Routes?

Parallel routes in NextJS allow you to display two pages on one segment. What that allows you to do is render two pieces of separate information that can be independently changed, and this allows for a more efficient user experience as it allows the page to load even if one page hasn't loaded yet.

Writing Code - Setup

For the setup, we are going to create a Next app, and if you are not confident in creating a Next app, you can have a look at my separate blog that covers setting up a NextJS application. Once you have created the application, open it up using code . in your terminal, and this should open it up in VisualStudioCode.

We will need to clean up some of this code to prepare for the parallel routes. The first thing that you are going to want to do is head over to the root page in the app folder and delete everything inside the return section.

Inside, add a div tag and then a h1 inside of that, and add some text.

Next, we need to take care of the CSS page. Delete everything inside there except the tailwindcss code if you implemented that into your project.

This is the end of the setup, and you are now ready for the rest of the code.

Writing Code - Using Parallel Routes

Now that we have the setup out of the way, we can start implementing this component into our application. The first thing to do is to create two folders: about and admin. But we need to put an @ symbol at the start. This allows Nextjs to know that this folder can be on another route. Then create pages inside each of the folders.

Once completing this, add functions to each of them:

export default function about() {
    return (
        <div className="bg-emerald-600">
            <h1>About</h1>
        </div>
    );
}

export default function admin() {
    return (
        <div className="bg-blue-600">
            <h1>Admin</h1>
        </div>
    );
}

Add CSS if you want to; it just helps to see the component outputted. To connect these segments, we are going to do it via a layout component.

In the layout component in your src, we are going to import these functions. But, since we created these folders in the root of the application, these functions are already imported through the use of React.ReactNode .

export default function RootLayout({
  children,
  about,
  admin
}:

The first step, as you can see, is next to the children key, add the others; in this case, it is about and admin. The next step is to use these keys and import them using React.ReactNode .

{
  children: React.ReactNode
  about: React.ReactNode
  admin: React.ReactNode
}) {

You can list these next to the children key. Finally, you can list these inside of the return function to display it on the screen. Now to view it, we can look back at our localhost or start it up using npm run dev.

As you can see, the segments have successfully been outputted on one segment

Conclusion

In conclusion, I hope you have learned and understood the fundamental uses of parallel routeing and how to use it in your application. As a result, you should have been able to use parallel routing in your app and see it work in the browser.

Qasim's Blog

Qasim's Blog

Parallel Routes In NextJS

What Are Parallel Routes?

Writing Code - Setup

Writing Code - Using Parallel Routes

Conclusion