Next.js Discord

Discord Forum

App router & SSG, root layout data not fetched during build

Answered
Himalayan posted this in #help-forum
Open in Discord
Avatar
HimalayanOP
I have a root layout which looks like this:

const RootLayout = ({
    children,
    params: { locale },
}: RootLayoutProps): ReactElement => (

    <htmllang={locale}>
        <body>
            <Header />
            <main>{children}</main>
            <Footer />
        </body>
    </html>
);


Header component:

const Header = async (): Promise<ReactElement> => {
    const menuItems = await new ApiSerice().getItems();
    return <UiHeader menuItems={menuItems} />;
};

export { Header };


UiHeader component:

"use client";

...

const UiHeader = ({
    menuItems,
    ...rest
}: HeaderProps): ReactElement => {

    return (
        <header
            {...rest}
        >
            <DesktopMenu
                menuItems={menuItems}
            />

...


DesktopMenu is also a use client component which uses some Radix components to render the desktop menu. When I trigger a build and check the output in the .next folder I notice that none of my menu items can be found in the .next folder. I would expect the build to have fetched my menu items from the API and rendered a menu on the server to be used by all pages. Am I doing something wrong?
Answered by Himalayan
I found the issue, we are using cookies() which is not allowed during SSG, I found the error after enabling fullUrl logging + adding const dynamic = "error"; at the top of my header component.
View full answer

1 Reply

Avatar
HimalayanOP
I found the issue, we are using cookies() which is not allowed during SSG, I found the error after enabling fullUrl logging + adding const dynamic = "error"; at the top of my header component.
Answer