Next.js Discord

Discord Forum

Dynamic server usage: Page couldn't be rendered statically because it used cookies - still need help

Unanswered
Siberian Rubythroat posted this in #help-forum
Open in Discord
Siberian RubythroatOP
10 - do not post cross questions - its ok when I bring attention to this issue like this?
Solved - https://github.com/vercel/next.js/issues/56630

I really need help how to figure out it

71 Replies

Aleutian Tern
I can't see your codesandbox link:
But my guess is this line the source of the error: 
//app/api/auth/callback/route.ts

const supabase = createRouteHandlerClient({ cookies })

Should be: 
const cookieStore = cookies()
const supabase = createRouteHandlerClient({ cookies: () => cookieStore })
New Guinea Singing Dog
adding 
export const dynamic = 'force-dyanmic'

To your API files + layout tsx if you use cookies in a server component etc fixed it for me
@Aleutian Tern I can't see your codesandbox link:
Siberian RubythroatOP
Its codesandbox bugs...
@Aleutian Tern But my guess is this line the source of the error: js //app/api/auth/callback/route.ts const supabase = createRouteHandlerClient({ cookies }) Should be: js const cookieStore = cookies() const supabase = createRouteHandlerClient({ cookies: () => cookieStore })
Siberian RubythroatOP
I did this changes and got this error
Collecting page data  ..Error: Invariant: cookies() expects to have requestAsyncStorage, none available.
@New Guinea Singing Dog adding js export const dynamic = 'force-dyanmic' To your API files + layout tsx if you use cookies in a server component etc fixed it for me
Siberian RubythroatOP
I did this changes

app/utils/supabaseServer.ts
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { Database } from "@/interfaces/types_db"

const supabaseServer = createServerComponentClient<Database>({ cookies })

export default supabaseServer
export const dynamic = 'force-dyanmic'

And got this error
 Dynamic server usage: Page couldn't be rendered statically because it used `cookies`
KINXZ
is it an error or a warning?
@KINXZ is it an error or a warning?
Siberian RubythroatOP
its neither error nor warning
I think its more error
That I got during build
I mean I write pnpm build and got this
New Guinea Singing Dog
youi have spelt dynamic wrong?
thats why its not switching to dynamic mode
its still trying to statically export it and thats causing the error
"Can't be rendered statically" -> Have to force it to use dynamic
@New Guinea Singing Dog You've got a typo in your export dynamic
Siberian RubythroatOP
I don't see an error - mark it for me please
@New Guinea Singing Dog youi have spelt dynamic wrong?
Siberian RubythroatOP
I don't understand what do you mean?
New Guinea Singing Dog
You have spelt the word wrong
Siberian RubythroatOP
a
yes
New Guinea Singing Dog
you put the a before the n
Siberian RubythroatOP
dyanmic
sould be dynamic
New Guinea Singing Dog
Yes
didn't realize i mis spelt it here - must've been sleepy
Siberian RubythroatOP
I tried this
app/utils/supabaseServer.ts
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { Database } from "@/interfaces/types_db"

const supabaseServer = createServerComponentClient<Database>({ cookies })

export default supabaseServer
export const dynamic = 'force-dynamic'


And got this (the same)
 Dynamic server usage: Page couldn't be rendered statically because it used `cookies`
New Guinea Singing Dog
What about your layout and other pages that use cookies?
Siberian RubythroatOP
Also I tried to add it in UserIcon.tsx - but got thie same error
New Guinea Singing Dog
What about your layout.tsx
@New Guinea Singing Dog What about your layout and other pages that use cookies?
Siberian RubythroatOP
Everything might use cookies is this

app/components/Navbar/Navbar.tsx - use cookies because supabaseServer
import supabaseServer from "@/utils/supabaseServer"
import { OpenAuthModalButton, UserIcon } from "./components"

export default async function Navbar() {
  const user = await supabaseServer.auth.getUser()

  return (
    <nav className="px-8 py-4 flex justify-between items-center gap-x-4">
      <OpenAuthModalButton />
      <UserIcon user={user} />
    </nav>
  )
}



And
app/utils/supabaseServer.ts
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { Database } from "@/interfaces/types_db"

const supabaseServer = createServerComponentClient<Database>({ cookies })

export default supabaseServer
export const dynamic = 'force-dynamic'
I tried comment out UserIcon.tsx and supabaseServer.ts and got no error
KINXZ
just checked their docs
Siberian RubythroatOP
I tried use supabaseClient instead of supabaseServer but got error about cannot invoce function
@New Guinea Singing Dog What about your layout.tsx
Siberian RubythroatOP
import "./globals.css"

import type { Metadata } from "next"
import { Inter } from "next/font/google"
import Layout from "./components/Layout"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "auth-form-next",
  description: "description",
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Layout>{children}</Layout>
      </body>
    </html>
  )
}
KINXZ
idk if its the cause
const cookieStore = cookies()
const supabase = createServerComponentClient({ cookies: () => cookieStore })
Siberian RubythroatOP
You may check repository here if you need some code - https://github.com/nicitaacom/auth-cookie-supabase-willbedeleted/blob/auth-form-next/app/components/Navbar/components/UserIcon.tsx
@KINXZ just checked their docs
Siberian RubythroatOP
I did it - I don't do setTimeout() - I suppose it much related to supabase rather then to next js
@KINXZ idk if its the cause
Siberian RubythroatOP
I tried this and got the another error
KINXZ
hmm
Siberian RubythroatOP
app/utils/supabaseServer.ts
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { Database } from "@/interfaces/types_db"

const cookieStore = cookies()
const supabaseServer = createServerComponentClient({ cookies: () => cookieStore })

export default supabaseServer
export const dynamic = 'force-dynamic'


I write pnpm build and got this
 Collecting page data  ..Error: Invariant: cookies() expects to have requestAsyncStorage, none available.
Also I updated the issue on github - https://github.com/vercel/next.js/issues/56630
Please up this issue
KINXZ
hmm
no idea why its not working tbh. I upped it. But the message Dynamic server usage: Page couldn't be rendered statically because it used cookies might not have an impact
its just saying its not statically rendered which should be correct
Also any of your link with the code isn't working, I think will be simple just to host you repo on github and share here.
Aleutian Tern
@Aleutian Tern Click to see attachment
Siberian RubythroatOP
My bad
I did repository public
try it again
Aleutian Tern
Update this file to have the following: 
const cookieStore = cookies()
const supabase = createRouteHandlerClient({ cookies: () => cookieStore })
@Aleutian Tern Update this file to have the following: js const cookieStore = cookies() const supabase = createRouteHandlerClient({ cookies: () => cookieStore })
Siberian RubythroatOP
I updated
app/(auth)/auth/callback/route.ts
import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get("code")

  if (code) {
+    const cookieStore = cookies()
+    const supabase = createRouteHandlerClient({ cookies: () => cookieStore })
-    const supabase = createRouteHandlerClient({ cookies })
    await supabase.auth.exchangeCodeForSession(code)
  }

  return NextResponse.redirect(requestUrl.origin)
}



I run pnpm build and got this
Collecting page data  ..Error: Invariant: cookies() expects to have requestAsyncStorage, none available.
Also I updated supabaseServer.ts
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { Database } from "@/interfaces/types_db"

+ const cookieStore = cookies()
+ const supabaseServer = createServerComponentClient({ cookies: () => cookieStore })
- const supabaseServer = createServerComponentClient<Database>({ cookies })

export default supabaseServer
export const dynamic = 'force-dynamic'
Without supabaseServer.ts update I got this error
Dynamic server usage: Page couldn't be rendered statically because it used `cookies

With supabaseServer.ts update I got this
Collecting page data  ..Error: Invariant: cookies() expects to have requestAsyncStorage, none available.
Aleutian Tern
Also remove the parenthesis from the auth path, you are using (auth) instead of auth
@Aleutian Tern Also remove the parenthesis from the auth path, you are using (auth) instead of `auth`
Siberian RubythroatOP
You mean to change path from
app/(auth)/auth/callback/route.ts
to
app/auth/callback/route.ts

?
Aleutian Tern
yes
And from the supabase docs, this needs to be your route.ts file: 

import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'

export const dynamic = 'force-dynamic'

export async function GET(request: Request) {
  // The `/auth/callback` route is required for the server-side auth flow implemented
  // by the Auth Helpers package. It exchanges an auth code for the user's session.
  // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get('code')

  if (code) {
    const supabase = createRouteHandlerClient({ cookies })
    await supabase.auth.exchangeCodeForSession(code)
  }

  // URL to redirect to after sign in process completes
  return NextResponse.redirect(requestUrl.origin)
}
Siberian RubythroatOP
I updated path for route.ts
app/auth/callback/route.ts

import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'

export const dynamic = 'force-dynamic'

export async function GET(request: Request) {
  // The `/auth/callback` route is required for the server-side auth flow implemented
  // by the Auth Helpers package. It exchanges an auth code for the user's session.
  // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get('code')

  if (code) {
    const supabase = createRouteHandlerClient({ cookies })
    await supabase.auth.exchangeCodeForSession(code)
  }

  // URL to redirect to after sign in process completes
  return NextResponse.redirect(requestUrl.origin)
}


after pnpm build - I got this error
 Collecting page data  ...Error: Invariant: cookies() expects to have requestAsyncStorage, none available.
Aleutian Tern
So, keep the cookies was it was before and export the dynamic variable directly on the router, otherwise the dynamic won't work. this variable needs to be defined per page/router basis
anyway thank you for help
Harlequin Duck
I had the same Problem today and fixed it somehow:
https://github.com/vercel/next.js/issues/56630#issuecomment-1755473286