DEV Community

Cover image for Parallel Routes: Starter Guide in Nextjs
Patrick Simonetti
Patrick Simonetti

Posted on • Edited on

Parallel Routes: Starter Guide in Nextjs

◼️ Next.js 13.3 add a lot of features

And one of which completely extends the basic optics of React root file with the classic and single children, as below

// app/layout.tsx

import type { PropsWithChildren } from 'react';

export default ({ children }: PropsWithChildren) => {
    return (
        <html lang="en" className="dark">
            <body>
                <div id="root">{children}</div>
            </body>
        </html>
    );
};
Enter fullscreen mode Exit fullscreen mode

was the parallel routes, with the idea of having multiple ReactNode children and especially independent pages, in terms of navigation and rendering, in one and the same view ( or better with same layout ) and in rare cases used for conditional rendering of pages, to overcome and expand this barrier.

◼️ Well, that's exactly the purpose parallel routes

// app/layout.tsx

import type { PropsWithChildren } from 'react';

export default ({ outlines, children: content, ads }: Props) => {
    return (
        <html lang="en" className="dark">
            <body>
                <div id="root">
                    {outlines}
                    {content}
                    {ads}
                </div>
            </body>
        </html>
    );
};

interface Props extends PropsWithChildren {
    ads: React.ReactNode;
    outlines: React.ReactNode;
}
Enter fullscreen mode Exit fullscreen mode

OK, sounds good right?
But how to define these damn parallel routes?

◼️ Syntax of parallel routes

Each of the new “children” we can define it as a “slot” in technical terms, and to define them is simply by creating a new folder, in the app router directory of course, with the following syntax @youtslotname,

To conclude, I leave you with the structure for defining slots that I showed you in the code example mentioned earlier:

app
├── @ads
   └── page.tsx
├── @outlines
   └── page.tsx
├── layout.tsx
└── page.tsx
Enter fullscreen mode Exit fullscreen mode

Top comments (0)