Page couldn't be rendered statically because it used `cookies` (supabase)

I got this error during build process

DynamicServerError: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

DynamicServerError: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error

codesandbox - https://codesandbox.io/p/github/nicitaacom/auth-cookie-supabase-willbedeleted/auth-form-next Here is my files that use cookies 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 supabase = createRouteHandlerClient({ cookies })
    await supabase.auth.exchangeCodeForSession(code)
  }

  return NextResponse.redirect(requestUrl.origin)
}

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 supabase = createRouteHandlerClient({ cookies })
    await supabase.auth.exchangeCodeForSession(code)
  }

  return NextResponse.redirect(requestUrl.origin)
}

middleware.ts

import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextRequest, NextResponse } from "next/server";

export async function middleware(req:NextRequest) {
    const res = NextResponse.next();
    const supabase = createMiddlewareClient({ req, res });
    await supabase.auth.getSession();
    return res;
}

import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextRequest, NextResponse } from "next/server";

export async function middleware(req:NextRequest) {
    const res = NextResponse.next();
    const supabase = createMiddlewareClient({ req, res });
    await supabase.auth.getSession();
    return res;
}

app/utils/supabaseServer.ts

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"


const supabaseServer = createServerComponentClient({ cookies })

export default supabaseServer

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"


const supabaseServer = createServerComponentClient({ cookies })

export default supabaseServer

` How fix this error?

4 Replies

dys 🐙•15mo ago

Cookies are sent by the browser when the page is requested. So, you can't refer to them outside of a context that's handling a request (like in a utility function). You need to have the Supabase connection stuff in the actual component that's being rendered. The docs are very extensive, and I'd think you can just model your code after them.

Supabase Auth with the Next.js App Router | Supabase Docs

Authentication and Authorization helpers for creating an authenticated Supabase client with the Next.js 13 App Router.

NikitaOP•15mo ago

It means every time I want to use supabase in server component I need to write this?

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

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

dys 🐙•15mo ago

That was my read of the documentation. Each Supabase connection is for a particular user. I was actually curious if passing the cookies from next/header straight into the create method, like you had in your previous code, was working for you. cookies returns a cookie store which is all that cookies: () => cookieStore is doing, so I don't see why you need to get the cookie store only to essentially recreate the cookies method with the result. Arguably, extracting it and passing the result memoizes it so there's only one copy, but I'd think the overhead is trivial if, in fact, Next doesn't memoize internally.

NikitaOP•15mo ago

Solved - https://github.com/vercel/next.js/issues/56630

Gaming

Programming

Page couldn't be rendered statically because it used `cookies` (supabase)