I'm not too sure if cookies() from next/headers is built to be used in middleware,
The cookies function allows you to read the HTTP incoming request cookies from a Server Component or write outgoing request cookies in a Server Action or Route Handler.
And looking at the docs for using cookies in middleware they suggest calling the .get() function on the request object it self

export function middleware(request: NextRequest) {
  // Assume a "Cookie:nextjs=fast" header to be present on the incoming request
  // Getting cookies from the request using the `RequestCookies` API
  let cookie = request.cookies.get('nextjs')
  console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
}

Are you able to try it this way and see if it fixes it?

Let me check

Supabase docs suggest using cookies in middleware

https://supabase.com/docs/guides/auth/auth-helpers/nextjs?language=ts
looking at the docs it only looks like they import cookies from next/headers in their callback API route, while in the middleware they have their own hook for it

@New Guinea Singing Dog I have also not imported cookies in my middleware.ts

I noticed that I'm jusing cookies() from next/headers in my server.ts where I create the supabase server client. is this bad practice?

import { createServerClient, type CookieOptions } from '@supabase/ssr';
import { cookies } from 'next/headers';

export const createClient = () => {
  const cookieStore = cookies();

  return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
    cookies: {
      ....}
}
};

its not bad practice, you just dont need to

the middleware has a req object

and you can get cookies directly from it without needing a helper

@DirtyCajunRice | AppDir I'm still not able to debug my issue:
Here's the error when building:

[Error]: 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

It doesn't tell me where!

Ok it seems to be in my root page because I'm using cookies() to feed into supabase

I fixed it by doing export const dynamic = 'force-dynamic';