Hello!

I have a middleware function which looks like this:

export async function middleware(request: NextRequest) {
  const hostname = request.headers.get("host")!.replace("www.", "");
  const domainLocale = domainTable[hostname] ?? defaultLocale;

  const response = NextResponse.next();

  const cookieLocale = request.cookies.get("locale")?.value;
  const locale = cookieLocale ?? domainLocale;
  response.cookies.set("locale", locale, {
    expires: dayjs().add(1, "year").toDate(),
  });

  return response;
}

Basically setting a locale cookie if it doesn't exist.

Then I read it like this:

export function getLocale() {
  const cookie = cookies().get("locale")?.value;
  console.log("🍪 cookie", cookie); // always undefined on first load
  return (cookie ?? defaultLocale) as (typeof locales)[number];
}

My problem is that the console.log just above will always be undefined on my first load. Like if I open up a page in "private browsing" and visit my website that cookie will not be defined until I reload this page. How can I fix this?