DynamicServerError: Dynamic server usage: cookies when trying to deploy

[skorfmann]

I'm seeing this error vercel/next.js#49373 when trying to deploy the example via Vercel.

Here's an excerpt from the build logs.

- warn Entire page /signin deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /signin
--
22:43:28.079 | DynamicServerError: Dynamic server usage: cookies
22:43:28.079 | at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
22:43:28.080 | at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
22:43:28.080 | at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
22:43:28.080 | at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
22:43:28.080 | at /vercel/path0/.next/server/chunks/883.js:3008:37
22:43:28.080 | at Generator.next (<anonymous>)
22:43:28.080 | at /vercel/path0/.next/server/chunks/883.js:2916:71
22:43:28.080 | at new Promise (<anonymous>)
22:43:28.080 | at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
22:43:28.081 | at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
22:43:28.081 | digest: 'DYNAMIC_SERVER_USAGE'
22:43:28.081 | }
22:43:28.081 | Error: DynamicServerError: Dynamic server usage: cookies
22:43:28.081 | at staticGenerationBailout (/vercel/path0/.next/server/chunks/883.js:11341:21)
22:43:28.083 | at Object.cookies (/vercel/path0/.next/server/chunks/883.js:11231:62)
22:43:28.083 | at NextServerComponentAuthStorageAdapter.getCookie (/vercel/path0/.next/server/chunks/913.js:199:42)
22:43:28.084 | at NextServerComponentAuthStorageAdapter.getItem (/vercel/path0/.next/server/chunks/913.js:571:28)
22:43:28.084 | at /vercel/path0/.next/server/chunks/883.js:3008:37
22:43:28.084 | at Generator.next (<anonymous>)
22:43:28.084 | at /vercel/path0/.next/server/chunks/883.js:2916:71
22:43:28.084 | at new Promise (<anonymous>)
22:43:28.084 | at __awaiter (/vercel/path0/.next/server/chunks/883.js:2898:12)
22:43:28.084 | at getItemAsync (/vercel/path0/.next/server/chunks/883.js:3007:38) {
22:43:28.084 | digest: 'DYNAMIC_SERVER_USAGE'

tried this with [email protected] as well

Any way to fix this?

[optimizfx]

I get this too, it looks like it never builds any api route pages, for me anyway!

I've tried adding

export const dynamic = 'force-dynamic';
export const revalidate = 0;

to those pages but it has no effect :(

[ajesuscode]

Same error on my side ((

[DoIevenLift]

Same error for me as well when using cookies in the latest supabase auth helpers.

No issues with previous Nextjs version (pre 13.4) and older supabase auth helpers.

[mvofreire]

Same problem here!

Any news here guys?

[ajesuscode]

Same problem here!

Any news here guys?

Check here #202 there are some workarounds

[DanielhCarranza]

Same error, has anyone figured it out yet? I tried all the steps with the latest versions but no success,

Error: DynamicServerError: Dynamic server usage: cookies
    at staticGenerationBailout (/home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/449.js:279:21)
    at Object.cookies (/home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/449.js:171:62)
    at NextServerComponentAuthStorageAdapter.getCookie (/home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/799.js:203:42)
    at NextServerComponentAuthStorageAdapter.getItem (/home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/799.js:571:28)
    at /home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/511.js:3078:37
    at Generator.next (<anonymous>)
    at /home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/511.js:2986:71
    at new Promise (<anonymous>)
    at __awaiter (/home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/511.js:2968:12)
    at getItemAsync (/home/danielhcarranza/projects/webapps/legalagent/.next/server/chunks/511.js:3077:38) {
  digest: 'DYNAMIC_SERVER_USAGE'
}

[DanielhCarranza]

I fixed it by adding export const revalidate = 0; to the layout.tsx

[BenLyddane]

I don't like the export const revalidate =0; solution, I don't want my entire app to build and operate like that.

I fixed it by add "use server" to the supabase-server.ts functions (getSession, getUserDetails, getSubscription, getActiveProductsWithPrices). The createServerSupabaseClient was giving me issues with the {cookies} it passes via server component.

Here's what a function looked like:

export async function getSession() {
'use server'
const supabase = createServerSupabaseClient();
try {
const {
data: { session }
} = await supabase.auth.getSession();
return session;
} catch (error) {
console.error('Error:', error);
return null;
}
}

Here is the Next JS page that helped me solve:

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions

[salvinoto]

Im still getting this I tried all of these fixes, I cannot for my life figure out why

[andersonbcdefg]

Me too :(

[lamebrowndev]

Anyone fix it?

[Shawns2759]

So very sad. The app was working for me, then I saw that a build failed. I went and reverted to the last successful build. From then on none of the builds suceded. Any news?

[Shawns2759]

removing the supabase cli fixed it for me.

[zavbala]

Dear God...

[lamebrowndev]

I don't like the export const revalidate =0; solution, I don't want my entire app to build and operate like that.

I fixed it by add "use server" to the supabase-server.ts functions (getSession, getUserDetails, getSubscription, getActiveProductsWithPrices). The createServerSupabaseClient was giving me issues with the {cookies} it passes via server component.

Here's what a function looked like:

export async function getSession() { 'use server' const supabase = createServerSupabaseClient(); try { const { data: { session } } = await supabase.auth.getSession(); return session; } catch (error) { console.error('Error:', error); return null; } }

Here is the Next JS page that helped me solve:

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions

This fixed it for me, thanks!

[bwkam]

I've tried adding 'use server' to every function supabase is related to, and still nothing works.

[cristigoia]

This #223 fixed the error for me.

[kimhwanhoon]

I don't like the export const revalidate =0; solution, I don't want my entire app to build and operate like that.

I fixed it by add "use server" to the supabase-server.ts functions (getSession, getUserDetails, getSubscription, getActiveProductsWithPrices). The createServerSupabaseClient was giving me issues with the {cookies} it passes via server component.

Here's what a function looked like:

export async function getSession() { 'use server' const supabase = createServerSupabaseClient(); try { const { data: { session } } = await supabase.auth.getSession(); return session; } catch (error) { console.error('Error:', error); return null; } }

Here is the Next JS page that helped me solve:

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions

but if I use this, I won't be able to get any auth token that is on cookies no?

[jecrs687]

I discovered that if the cookie is called inside a try-catch it will generate this error.

Solutions: put the calling of the cookie (and headers) outside try-catch.

[ruuuruiya]

I discovered that if the cookie is called inside a try-catch it will generate this error.

Solutions: put the calling of the cookie (and headers) outside try-catch.

no one is calling the cookie in try catch. it's called from server components

[DoIevenLift]

I think this error kinda makes sense? If there is a page (or anything) that is using something that dynamically changes such as a cookie, even if that cookie is nested inside a server action then it can't render as a static resource.

In my case, the app still deploys every time despite the 'errors' - this may not be the same experience that other users are having however. I actually think that this is meant to be a warning rather than an error and should still allow the posting of the app build. Nextjs / Nextjs on Vercel might have a failsafe were if it can't render it statically, it'll shift it to dynamic?

Try doing something like this with your supabase server/serveraction clients.

const cookieStore = cookies();

const supabase = createWhateverTypeClient<Database>({ cookies: () => cookieStore });

I know the supabase docs especially for serverActionClient use ({ cookies }) but this could be causing the issue.

Unsure how long this has been up in the nextjs docs but here is a reference to their help doc to resolve the 'error' : https://nextjs.org/docs/messages/dynamic-server-error

Due to the app deploying and functioning I've put this in the 'deal with later' basket but hopefully these solutions might get people closer to a resolution.

[jecrs687]

I discovered that if the cookie is called inside a try-catch, it will generate this error.
Solutions: put the calling of the cookie (and headers) outside try-catch.

no one is calling the cookie in try catch. it's called from server components

Sorry for not explaining it before, but in the background, when you use getSession of supabase, it will try to get cookies. And, if it is inside a try-catch, as in the example of BenLyddane, you will get an error.

The way to fix that is doing as DoIevenLift: put cookies outside any other function or conditional. When you declare cookies in this way, the build will understand that it is not a static content.

Other important thing is, if the cookie is called inside a server component, but wrapped in another function, you needs to use one of those options:

export const dynamic = "force-dynamic"
export const revalidate = 0
insert "use server" on the top of the file (or in the next line after declaration)

To explain that function will run on the server.

See the code behind getSession:
https://github.com/supabase/gotrue-js/blob/15c7c8258b2d42d3378be4f7738c728a07523579/src/GoTrueClient.ts#L898

[Trafke011]

This is what I got from Copilot, when I had entered the error response:

**Possible Solutions
Force Dynamic Rendering: If you need to use cookies, you can force the page to be dynamically rendered by adding the following line to your component or page:
JavaScript

export const dynamic = 'force-dynamic';
AI-generated code. Review and use carefully. More info on FAQ.This tells Next.js to treat the page as dynamic, allowing the use of cookies1.
Separate Static and Dynamic Parts: Another approach is to separate the static and dynamic parts of your application. You can statically generate the main structure of the page and then use client-side JavaScript to handle dynamic parts that require cookies.
Check for Static Generation: You can conditionally check if the code is running during static generation and avoid using cookies in that case:
JavaScript

import { cookies } from 'next/headers';

if (typeof window !== 'undefined') {
// Code that uses cookies
const allCookies = cookies().getAll();
}
AI-generated code. Review and use carefully. More info on FAQ.
Review Next.js Documentation: For more detailed guidance, you can refer to the Next.js documentation on dynamic server usage2.**