◼️ 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
Top comments (0)