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 👇🏻

Comments

[Keremcan Şeker]

I have a folder structure like this
(shared)
@header
default.tsx
page.tsx
folder1
folder2
..
layout.tsx

in the layout tsx I take the header as react.node param and render it like {header}
but still it is not rendered when I remove default.tsx in the @header I get 404 always if keep default.tsx I always get its content never reach @header/page.tsx
Why would that be can you help me ?

[Riddhiman007]

Thanks