[NextJS] 👩🏻‍🍳 cookies & headers

cookies

• 비동기 함수로 Server Component로부터 http 수신 요청 쿠키를 읽어들일 수 있다.
• Server Action이나 Router Handler안에서는 요청에 포함될 쿠키를 읽거나 쓸 수 있다. 
• async/await 나 React의 use와 함께 사용해야한다.

import { cookies } from 'next/headers'
 
export default async function Page() {
  const cookieStore = await cookies()
  const theme = cookieStore.get('theme') //만약 이름을 찾을 수 없다면 undefined를 반환
  return '...'
}

 

cookies() 읽기	Server Component	async/await 필요 (Next.js 15 기준)
cookies().set()	Server Action, Route Handler	응답 스트리밍 전이어야 함
cookies().delete()	Server Action, Route Handler	도메인/프로토콜 일치 필요

headers

• headers도 비동기 함수로 Server Component나 Router Handler에서 요청하여 헤더를 읽기만 가능하다.
• 읽기 전용이기 때문에 set과 delete가 불가능하다.
• async/await 나 React의 use와 함께 사용해야한다. 

import { headers } from 'next/headers'
 
export default async function Page() {
  const headersList = await headers()
  const userAgent = headersList.get('user-agent')
}

사용예시

export async function GET(request: NextRequest) {
  const { host } = request.nextUrl;
  const nextHeaders = await headers();
  const userAgent = nextHeaders.get('user-agent');
  const res = NextResponse.json(
    { host },
    {
      headers: { 'Custom-Cookie': userAgent!, 'Set-Cookie': 'sid=1123' },
    }
  );
  res.cookies.set('x', '123');
  res.cookies.set('y', '456');

  const expireDate = new Date();
  expireDate.setTime(expireDate.getTime() + 24 * 60 * 60 * 1000);
  res.cookies.set('otherCookies', 'ooxx', {
    // maxAge: 5 * 60, // 86400 , 생성 시점으로부터 몇초
    httpOnly: true, 
    path: '/', // 어떤 경로에서 쿠키가 유효한지
    secure: false, // HTTPS 연결에서만 전송할지 여부
    expires: expireDate, // 쿠키 만료일, 특정 시간, 시점에 만료
  });

  return res;
}

• httpOnly : document.cookie를 통해 접근할 수 없도록 제한(XSS 공격 방지)
• path: 어떤 경로에서 쿠키가 유효한지
• secure: HTTPS 연결에서만 전송할지 여부
• expires: 쿠키 만료일, 특정시간, 시점에 만료 
• maxAge: 생성 시점으로 부터 몇초(expires보다 먼저 적용) ➡️ 거의 안씀

user-agent란?

• user-agent는 요청을 보낸 브라우저, 운영체제, 디바이스 정보를 담고 있는 HTTP 헤더입니다.
• 브라우저 환경을 분석하거나, 디버깅용으로 자주 사용되며,
• 일반적인 인증 처리에서는 쿠키를 통해 인증 여부를 판단하는 것이 일반적입니다.

🚨 Cannot read private member #headers from an object whose class did not declare it 

//nextHeaders의 값을 console.log를 할 경우 위와 같은 에러가 발생한다. 
const nextHeaders = await headers();
console.log(nextHeaders);

 

원인: private필드가 정의 되있어서 읽지 못하게 되어있다

 

아래와 같은 방법으로 읽을 순 있지만 그래도 에러는 발생한다. 

for (const [key, value] of headerList.entries()) {
  console.log(`${key}: ${value}`);
}

 

https://github.com/vercel/next.js/discussions/68849

TypeError: Cannot read private member #headersList from an object whose class did not declare it · vercel next.js · Discussion