Next.js Discord

Discord Forum

Having issue with parallel route in Nextjs 15.

Unanswered
Tonkinese posted this in #help-forum
Open in Discord
Avatar
TonkineseOP
So I have /account route and then inside it are /@login and /@dashboard. And then /@dashboard/profile. Now if a users directly accesses /account/profile then we return notfound() now what it does is it returns to account/layout.tsx which gives me
Error: Rendered more hooks than during the previous render.
Here some refeerence codes.

/account/layout.tsx

import { getCustomer } from "@/lib/data";
import { notFound } from "next/navigation";

interface AccountLayoutProps {
  dashboard: React.ReactNode;
  login: React.ReactNode;
  params: Promise<{
    storeHandle: string;
    countryCode: string;
  }>;
}

export default async function Layout({ dashboard, login }: AccountLayoutProps) {
  const customer = await getCustomer().catch(() => null);
  return (
    <div
      className="flex-1 min-h-screen bg-black text-[#F5FDE5]/80"
      data-testid="account-page"
    >
      <div className="max-w-5xl mx-auto px-4 py-8 md:px-6 lg:px-8">
        <main className="w-full">{customer ? dashboard : login}</main>
      </div>
    </div>
  );
}


/account/@dashboard/profile/page.tsx

import { getCustomer, listRegions } from "@/lib/data";
import type { Metadata } from "next";
import { notFound } from "next/navigation";

export default async function Profile() {
  const [customer, regions] = await Promise.all([getCustomer(), listRegions()]);
  if (!customer || !regions) {
    notFound();
  }
  return (
    <div
      className="w-full min-h-screen bg-black text-white dark:bg-black dark:text-white"
      data-testid="profile-page-wrapper"
    >
      <div className="max-w-4xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
 {...some client components...}
      </div>
    </div>
  );
}

5 Replies

Avatar
West African Crocodile
excuse me, I don't understand your purpose. explain in detail
Avatar
TonkineseOP
Hey, so we are using parallel routes to render login and dashboard routes. We check if the user is logged in we render dashboard if not then we render login page. In one of our protected pages which profile page which is inside the @dashboard we return 404 if the user tries to access it directly if they are not logged in. But now the problem is when we do that it renders 404 and then immediately gives error which is rendered more hooks than previous render. I tried to debug it so what is happening is after showing 404 it again goes to /account/layout.tsx which has the logic for parallel routes which runs the logic to decide which parallel route to render. Hence causing this error logically it should stop at 404 and not render anything after that.
All of the routes are rsc
Avatar
West African Crocodile
I think implementing the logic in @dashboard/default.tsx could solve this issue.
plz try it.