In the Next.js app router documentation, there’s a note:
“Good to know: cookies() is a Dynamic Function whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into dynamic rendering at request time.”
This means that if I have to use the cookies function in the app router’s root layout, I cannot use SSG (Static Site Generation) for pre-rendering.
Is there a way to use the cookies function in the app router’s root layout while still enabling SSG pre-rendering at build time?
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
<ZustandProvider
initialZustandState={{
info: {
...(await getAuth({
headers: headers(),
cookies: cookies(), // .. want to use this APIs
})),
},
}}
>
<QueryProvider>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</QueryProvider>
</ZustandProvider>
</body>
</html>
);
}
New contributor
jake is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.