◼️ 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>
    );
};

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

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

Parallel Routes: Starter Guide in Nextjs

◼️ Next.js 13.3 add a lot of features

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

◼️ Syntax of parallel routes