DEV Community

Cover image for Troubleshooting parallel routing in Next.js
Lois
Lois

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

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

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>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode
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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Top comments (1)

Collapse
 
riddhiman007 profile image
Riddhiman007

Thanks