Parallel routing is a opt in feature in NextJs where you can render one or more pages within the same layout simultaneously or conditionally. It is recommended for highly dynamic sections of an application like dashboards and feeds on social sites.

Go through the folder structure for the current implementation below for a quick drive on how to define parallel routes.

As you can see, parallel routes are denoted by the named slots. Slots are defined with the convention @folder

Currently we are at the route segment /parallel-routing, and we have four parallel routes under that namely @firstPage, @secondPage, @thirdPage, and @fourthPage which corresponds to One, Two, Three, and Four page titles respectively on the implementation section.

Now all those named slots are passed as props to the parent layout.tsx file. Inside that layout file, you can choose to render those slots any way you want and can also position them any way you want. The page.tsx file directly under /parallel-routing folder will be passed as children prop to the layout as well. That's why children is an implicit slot that NextJs automatically passes to your layout.

Each parallel routes can have both error.tsx and loading.tsx files which enables page streaming and granular error handling as you can see in the demo. You can play around it get the idea.