Cookies

cookies 함수를 사용하면 서버 컴포넌트에서 HTTP 수신 요청 쿠키를 읽거나 서버 액션 또는 라우트 핸들러에서 발신 요청 쿠키를 작성할 수 있습니다.

알아두면 좋은 점: cookies()는 동적 함수 로, 반환 값을 미리 알 수 없습니다. 레이아웃이나 페이지에서 사용하면 요청 시 동적 렌더링 으로 라우트가 설정됩니다.

`cookies().get(name)`

쿠키 이름을 받아 이름과 값이 포함된 객체를 반환하는 메서드입니다. name과 일치하는 쿠키를 찾지 못하면 undefined를 반환합니다. 여러 쿠키가 일치하는 경우 첫 번째 일치 항목만 반환합니다.

app/page.js

import { cookies } from "next/headers";
 
export default function Page() {
  const cookieStore = cookies();
  const theme = cookieStore.get("theme");
  return "...";
}

`cookies().getAll()`

get과 비슷하지만 일치하는 name을 가진 모든 쿠키 목록을 반환하는 메서드입니다. name을 지정하지 않으면 사용 가능한 모든 쿠키를 반환합니다.

app/page.js

import { cookies } from "next/headers";
 
export default function Page() {
  const cookieStore = cookies();
  return cookieStore.getAll().map((cookie) => (
    <div key={cookie.name}>
      <p>Name: {cookie.name}</p>
      <p>Value: {cookie.value}</p>
    </div>
  ));
}

`cookies().has(name)`

쿠키 이름을 받아 쿠키가 존재하면 true, 그렇지 않으면 false를 반환하는 메서드입니다.

app/page.js

import { cookies } from "next/headers";
 
export default function Page() {
  const cookieStore = cookies();
  const hasCookie = cookieStore.has("theme");
  return "...";
}

`cookies().set(name, value, options)`

쿠키 이름, 값, 옵션을 받아 발신 요청 쿠키를 설정하는 메서드입니다.

알아두면 좋은 점: HTTP는 스트리밍이 시작된 후 쿠키 설정을 허용하지 않으므로 서버 액션 또는 라우트 핸들러에서 .set()을 사용해야 합니다.

app/actions.js

"use server";
 
import { cookies } from "next/headers";
 
async function create(data) {
  cookies().set("name", "lee");
  // 또는
  cookies().set("name", "lee", { secure: true });
  // 또는
  cookies().set({
    name: "name",
    value: "lee",
    httpOnly: true,
    path: "/",
  });
}

쿠키 삭제하기

알아두면 좋은 점: 서버 액션 또는 라우트 핸들러에서만 쿠키를 삭제할 수 있습니다.

쿠키를 삭제하는 여러 가지 방법이 있습니다:

`cookies().delete(name)`

주어진 이름의 쿠키를 명시적으로 삭제할 수 있습니다.

app/actions.js

'use server'
 
import { cookies } from 'next/headers'
 
async function delete(data) {
  cookies().delete('name')
}

`cookies().set(name, '')`

또는 같은 이름으로 새 쿠키를 설정하고 값을 비워둘 수 있습니다.

app/actions.js

'use server'
 
import { cookies } from 'next/headers'
 
async function delete(data) {
  cookies().set('name', '')
}

알아두면 좋은 점: .set()은 서버 액션 또는 라우트 핸들러에서만 사용할 수 있습니다.

`cookies().set(name, value, { maxAge: 0 })`

maxAge를 0으로 설정하면 쿠키가 즉시 만료됩니다. maxAge는 초 단위의 값을 받습니다.

app/actions.js

'use server'
 
import { cookies } from 'next/headers'
 
async function delete(data) {
  cookies().set('name', 'value', { maxAge: 0 })
}

`cookies().set(name, value, { expires: timestamp })`

expires를 과거의 어떤 값으로 설정하면 쿠키가 즉시 만료됩니다.

app/actions.js

'use server'
 
import { cookies } from 'next/headers'
 
async function delete(data) {
  const oneDay = 24 * 60 * 60 * 1000
  cookies().set('name', 'value', { expires: Date.now() - oneDay })
}

알아두면 좋은 점: .set()이 호출되는 동일한 도메인에 속한 쿠키만 삭제할 수 있습니다. 또한 삭제하려는 쿠키와 동일한 프로토콜(HTTP 또는 HTTPS)에서 코드가 실행되어야 합니다.

버전 기록

버전	변경 사항
`v13.0.0`	`cookies` 도입되었습니다.

함수 draftMode