Troubleshooting parallel routing in Next.js

Parallel routing is great --- it allows you to render a slot based on certain conditions conditionally, either auth or data fetching status.

If you haven't heard of or used parallel routing before, please check this

But it can go wrong very quick, luckily fixes are quick too!

In a scenario you have a blank page comes with a layout, and you are trying to hydrate the page with three parallel route: overview, projects, and dashboard to show different things to your users. But it can break when you have a file structure like

|-[workspaceId]
|--create-project
|--settings
|--@overview
|--@projects
|--@dashboard
|--layout.tsx

Problem 1: it shows you a blank page

What you can do?
In your layout.tsx file, you have already specified

export default function WorkspaceLayout(props: {

  create: React.ReactNode;
  projects: React.ReactNode;
  overview: React.ReactNode;
}) {
  return (
    <>
     <SomeLayout>
      {props.projects}
        {props.create}
      {props.overview}
    </SomeLayout>
    </>
  );
}

Solution 1: In this case, You will need an empty page.tsx like:

export default function DashboardPage(props: {
  params: { workspaceId: string };
}) {
  return <></>;
}

with an empty fragment and add the implicit children your layout.tsx like so:

 export default function WorkspaceLayout(props: {
  children: React.ReactNode;
  create: React.ReactNode;
  projects: React.ReactNode;
  overview: React.ReactNode;
}) {
  return (
    <>
    {props.children} // it really doesn't matter where this is placed because it's nothing in there, 
     <SomeLayout>
      {props.projects}
        {props.create}
      {props.overview}
    </SomeLayout>
    </>
  );
}

If the page.tsx, or children prop doesn't exist, nextjs can't initialise this segment.

At this point your files will look like

|-[workspaceId]
|--create-project
|--settings
|--@overview
|--@projects
|--@dashboard
|--layout.tsx
|--page.tx

Problem 2: when you navigate to /[someworkspaceId]/create-project, it shows you a 404 error, tell you page not found or internal server error.

What the heck happened? I have a route there!

Solution 2: Create a separate layout group

Instead of having a file structure like above, you could have one like this:

|-[workspaceId]
|--create-project
|--settings
|--page.tsx
|--layout.tsx
|--(dashboard)
|---@overview
|---@projects
|---@dashboard
|---layout.tsx
|---page.tx

Move the old layout.tsx into (dashboard) folder but keep the <SomeLayout/> component in [workspaceId] folder, and there you have layouts inherited from a level above, and routes like /[workspaceId]/create-project will work again!

Do you have problems with parallel routing and intercepting routes? Found a solution or not?

Would love to hear from comment section 👇🏻