cookies

cookies 함수는 서버 컴포넌트에서 HTTP 요청 쿠키를 읽거나, 서버 액션 또는 라우트 핸들러에서 응답 쿠키를 작성할 수 있게 해줍니다.

참고: cookies()는 **동적 함수**로, 반환된 값을 미리 알 수 없습니다. 레이아웃이나 페이지에서 사용할 경우, 해당 경로는 요청 시 **동적 렌더링**으로 전환됩니다.

`cookies().get(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이 지정되지 않은 경우, 사용 가능한 모든 쿠키를 반환합니다.

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
  cookies().set('name', 'value', { expires: Date.now() - oneDay })
}

참고: .set()을 호출하는 동일한 도메인에 속한 쿠키만 삭제할 수 있습니다. 또한, 삭제하려는 쿠키와 동일한 프로토콜(HTTP 또는 HTTPS)에서 코드가 실행되어야 합니다.

버전 기록

버전	변경 사항
`v13.0.0`	`cookies` 도입.

Functions Draft Mode