Is there a way to trigger error.tsx from layout component in nextjs?

Question

I have a layout like this:

export default async function ClientLayout({
    children,
}: Readonly<{
    children: React.ReactNode;
}>) {
    return (
        <>
            <Header />
            <main>{children}</main>
            <Footer />
        </>
    );
}

And in Header I call fetchDepartments (and especially throw an error for now to check if error.tsx will be shown):

export default async function Header() {
    const departments = await fetchDepartments();

    return (
        <header className={styles.navbar}>
            <nav className={`${styles.container} container`}>
                <Link href={"/"} className={styles.logo}>
                    <Image src={logo} priority={true} alt="logo" />
                </Link>
                {/*<DepartmentsSelectContainer />*/}
                <Links />
                <div className={styles.bookingBtn}>
                    <Link className={`btn yellow sm`} href={"/contacts"}>
                        Запис на прийом
                    </Link>
                </div>
            </nav>
        </header>
    );
}

But this error triggers Next.js default error modal except error.tsx.

There is a way to make layout 1 level above my current layout and put error.tsx in its layout folder, but in this situation, my header and footer won't be rendered -- but I need them rendered.

What specific Next.js version are you using, and where exactly is your error.tsx file located relative to this layout? — Hashan Hemachandra
– Hashan Hemachandra, Commented Sep 1 at 0:59

Dmytro · Accepted Answer · 2025-09-02 10:55:58Z

0

Problem ocurred because my layout.tsx was in path folder that is in brackets (client) and I placed my error.tsx in the same folder expecting that error page would be shown inside layout.
If I properly understood, because my error.tsx was in path folder in (client), Nextjs. When I moved it one layout higher, it started working. And then i understood that in my situation error.tsx needs it's own layout not inherit it from (client) folder's layout, so i left error.tsx there.

answered Sep 2 at 10:55

Dmytro

751 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is there a way to trigger error.tsx from layout component in nextjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related