[Error]: Dynamic server usage: Route couldn't be rendered statically because it used cookies.

[leonardoparisii]

Hi, I'm experiencing this build error in my application,

To Reproduce

1. -Use auth with cookies and supabase
2. -Got this error

Additional context

middleware.ts

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

  const {
    data: { user },
  } = await supabase.auth.getUser();

  return res;
}

app/api/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);
}

app/utils/supabase.ts

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

const supabaseServer = () => {
  cookies().getAll();
  return createServerComponentClient({ cookies });
};

export default supabaseServer;

description: "Route /<NAME_ROUTE>couldn't be rendered statically because it used cookies. See more info here: https://nextjs.org/docs/messages/dynamic-server-error",

I'm getting this in every route where I have something like this:

  const supabase = createServerComponentClient({ cookies });

  const {
    data: { user },
  } = await supabase.auth.getUser();

[jblewnormal]

@leonardoparisii Hey, have you made any progress on this? I've run into the same issue and spent hours looking for solutions with no success.

[leonardoparisii]

Actually yes, using @supabase/ssr package instead of using @supabase/auth-helpers-nextjs!

You can find everything on how to use @supabase/ssr with nextjs here, which is the guide I followed:

https://supabase.com/docs/guides/auth/server-side/nextjs

[jblewnormal]

@leonardoparisii Yeah I've been following that guide as well - but for some reason the behavior is different in my project. If I try using the createClient() server version in any component, or even in a util function and then use that in a component, it throws the error about cookies or headers.

Did you have to do anything beyond that guide?

[leonardoparisii]

Nope, I just fixed it by sticking to the guide:

I have this folder structure for the supabase init files:

and the auth route for the code param under /app:

everything with the same content of the docs, I only added a couple of checks on the protected routes inside of the middleware.ts file, (the one at the /src level).

[jblewnormal]

@leonardoparisii What version of next are you on? I'm using 14, but have noticed most of the troubleshooting online for this issue is in 13 I think.

[leonardoparisii]

I'm on version 14.2.2. Yeah, you can try downgrading Next and see what happens. Let me know when you find out what the problem is because I'm pretty curious now lmao.