Next.js Discord

Discord Forum

Conflict between static page and cookies in Next.js while using Supabase server client

Unanswered
Broad-snouted Caiman posted this in #help-forum
Open in Discord
Broad-snouted CaimanOP
Hi there! I'm using Supabase ssr package and I have several static pages in Next.js. I'm protecting them through middleware.ts and using Supabase middleware client example. The thing is, in my layout.tsx there is a Header component, in which I've put an AuthButton, just like Supabase's example in Vercel template. So, this AuthButton appears in all pages, including the static ones. This AuthButton is a server component which uses the Supabase server client example.

When I use pnpm run build, there are several errors about conflict between static page and AuthButton, like:

Error occurred prerendering page "/course/chapter1". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Page with `dynamic = "error"` couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering
    at staticGenerationBailout (\.next\server\chunks\50.js:1:136990)
    at cookies (\.next\server\chunks\50.js:1:124883)
    at createSupabaseServerClient (\.next\server\chunks\402.js:1:16980)
    at AuthButton (\.next\server\chunks\402.js:1:13184)


How can I fix this, please? Thanks in advance.

1 Reply

Broad-snouted CaimanOP
I've tried to transform it in a client component and to use 
supabase.auth.onAuthStateChange
but it didn't work well. I think it is because it is on the layout.tsx and is not rendered often or something like that.