because the server doesn't have any cookie. the browser has the cookie.

you need to use [headers()](https://nextjs.org/docs/app/api-reference/functions/headers) or [cookies()](https://nextjs.org/docs/app/api-reference/functions/cookies) to grab the cookie from the request from the browser, then attach that cookie to the request that you make from the server

I mean if i use cookie directly from the server page it works?

what do you mean by "cookie directly from the server page"?

this works

// /app/page.tsx
import { cookies } from 'next/headers'

export default function Home() {
  const token = cookies().get('token')?.value
}

this works

// /api/cookie/route.ts
import { cookies } from 'next/headers'

export default function  GET() {
  const token = cookies().get('token')?.value
  return NextResponse.json(token)
}

but this doesnt

export default function Home() {
  const token = await fetch(.../cookie)....
  // we wont be able to get token this way
}

why is that?

the first two works. the last one doesn't work because the fetch is made from the server where the cookie doesn't exist; the fetch has to be made from the browser for the cookie to be automatically populated

see also https://nextjs-discord-common-questions.joulev.dev/fetching-own-api-endpoint-in-react-server-components

how should I handle this?

pass the token from the pages to the api? any other good way?

like this

import { cookies } from "next/headers";

async function getData() {
  const response = await fetch(process.env.API_ENDPOINT, {
    headers: { Cookie: cookies().toString() },
  });
  return await response.json();
}

source https://stackoverflow.com/a/76280543

nice! Thanks!