Cookies (쿠키)

cookies는 Server Components에서 들어오는 HTTP 요청의 쿠키를 읽고, Server Actions나 Route Handlers에서는 나가는 요청의 쿠키를 읽거나 쓸 수 있게 해주는 비동기 함수입니다.

간단히 말해서, 서버 측에서 쿠키를 다루고 싶을 때 아주 유용한 도구에요. 예를 들어, 사용자가 설정한 테마값을 쿠키로 저장하고, 페이지를 렌더링할 때 이 값을 가져와서 다르게 보여주고 싶을 때 사용할 수 있죠.

import { cookies } from "next/headers";

export default async function Page() {
  const cookieStore = await cookies(); // 쿠키 저장소를 비동기적으로 가져옵니다.
  const theme = cookieStore.get("theme"); // 'theme'이라는 이름의 쿠키를 읽어옵니다.
  return "...";
}

위 예제에서 cookieStore는 실제 쿠키 데이터를 다룰 수 있는 객체를 반환해줘요. get 메서드를 통해 특정 쿠키 값을 읽을 수 있죠.

추가 팁 - 쿠키 다루기

읽기 & 쓰기: Server Actions나 Route Handlers에서는 cookieStore.set('name', 'value', options)를 사용해 쿠키를 설정할 수 있어요. 예를 들어, 사용자 로그인 후 세션 정보를 쿠키로 저장하는 경우처럼요.
옵션 설정: 쿠키 설정 시 path, httpOnly, secure, maxAge 등 다양한 옵션을 줄 수 있습니다. 이를 통해 보안이나 쿠키 유효 기간 등을 조절할 수 있죠.
실제 활용 예시:

import { cookies } from "next/headers";

export async function POST() {
  const cookieStore = cookies();
  cookieStore.set("token", "abc123", { httpOnly: true, maxAge: 60 * 60 * 24 }); // 1일 동안 유효한 쿠키
  return new Response("쿠키가 설정되었습니다.");
}

cookies 함수는 Next.js 최신 버전에서 Server Components, Server Actions, Route Handlers 같은 서버 환경에서 쿠키를 안전하고 편리하게 다룰 수 있게 설계된 기능입니다. 클라이언트에서 document.cookie를 직접 만지는 것보다 훨씬 안전하고 깔끔하니, 서버에서 쿠키 작업이 필요할 때 적극 활용해 보세요!

메서드 소개

아래는 사용할 수 있는 메서드들입니다:

메서드	반환 타입	설명
`get('name')`	Object	쿠키 이름을 받아서 그 이름과 값이 담긴 객체를 반환해요.
`getAll()`	객체 배열	이름이 일치하는 모든 쿠키를 배열로 반환해줍니다.
`has('name')`	Boolean	쿠키 이름을 받아서 해당 쿠키가 존재하는지 true/false로 알려줘요.
`set(name, value, options)`	-	쿠키 이름, 값, 옵션을 받아서 요청하는 쿠키를 설정합니다.
`delete(name)`	-	쿠키 이름을 받아서 해당 쿠키를 삭제해줘요.
`clear()`	-	모든 쿠키를 한 번에 삭제합니다.
`toString()`	String	현재 쿠키들을 문자열 포맷으로 반환해줘요.

직접 개발하다 보면 쿠키를 다루는 일이 꽤 잦을텐데, 이런 메서드들이 있으면 정말 편리하겠죠? 예를 들어, has('name') 메서드로 쿠키가 있는지 딱 체크해서 조건문을 쓰기도 쉽고, getAll() 메서드로 같은 이름을 가진 여러 쿠키를 모두 가져올 수도 있으니까 상황에 맞게 유용하게 쓸 수 있답니다.

쿠키를 설정할 때는 set() 메서드에 옵션을 함께 넘겨주면, 유효 기간, 경로, 도메인 같은 세부 설정도 가능해서 제어가 한층 더 세밀해져요.

이렇게 메서드들을 잘 활용하면 쿠키 관리를 훨씬 깔끔하게 할 수 있으니 참고하세요!

쿠키(cookie)를 설정할 때 옵션 객체에서 사용할 수 있는 속성들은 아래와 같아요:

옵션	타입	설명
`name`	String	쿠키의 이름을 지정합니다.
`value`	String	쿠키에 저장할 값을 지정합니다.
`expires`	Date	쿠키 만료일을 정확하게 설정합니다.
`maxAge`	Number	쿠키의 수명(초 단위)을 설정합니다.
`domain`	String	쿠키가 유효한 도메인을 지정합니다.
`path`	String, 기본값: `'/'`	쿠키의 유효 경로를 지정해 특정 경로 내에서만 쿠키가 사용되도록 제한할 수 있습니다.
`secure`	Boolean	HTTPS 연결에서만 쿠키가 전송되도록 하여 보안을 강화합니다.
`httpOnly`	Boolean	클라이언트 자바스크립트에서 쿠키 접근을 차단해 HTTP 요청에만 쿠키 사용을 제한합니다.
`sameSite`	Boolean, `'lax'`, `'strict'`, `'none'`	크로스 사이트 요청에 대한 쿠키 동작 방식을 제어합니다.
`priority`	String (`"low"`, `"medium"`, `"high"`)	쿠키의 우선순위를 지정합니다.
`encode('value')`	Function	쿠키 값을 인코딩하는 데 사용할 함수를 지정할 수 있습니다.
`partitioned`	Boolean	쿠키가 Partitioned Cookies인지 여부를 나타냅니다.

여기서 path 옵션은 기본값이 '/'로 설정되어 있으니, 특정 경로에서만 쿠키가 유효하게 하려면 다른 값을 명시해줘야 해요.

좀 더 알려드릴 게 있어요!

secure 옵션을 꼭 써야 하는 이유
쿠키가 HTTPS를 통해서만 전송될 수 있게 하는 secure 옵션은 민감한 정보 전송 시 보안을 크게 높여줍니다. 꼭 HTTPS 환경에서만 쿠키를 사용해야 할 경우 꼭 활성화해 주세요.
httpOnly가 왜 중요한가?
httpOnly 속성을 활성화하면, 클라이언트 측 자바스크립트가 쿠키에 접근하지 못해서 XSS 공격에 의한 쿠키 탈취 위험을 줄일 수 있어요.
sameSite 옵션으로 CSRF 방어하기
요즘은 크로스 사이트 요청 위조(CSRF) 공격 문제가 많기 때문에, sameSite 옵션을 'lax' 또는 'strict'로 설정하는 것이 보안에 도움이 됩니다.
Partitioned Cookies
아직 상대적으로 최신 기술인 partitioned cookies는 브라우저별로 쿠키 저장소를 분리해서 사용자 간 추적을 어렵게 만드는 방향으로 연구되고 있습니다. 관심 있다면 GitHub 링크를 참고해 보세요!

쿠키 설정에 대해 더 자세한 내용은 MDN 웹 문서에서 확인하실 수 있어요. 여기에 다양한 사례와 권장하는 보안 설정 방법도 소개되어 있으니 참고하면 큰 도움이 됩니다!

알아두면 좋은 팁들

cookies 함수는 비동기 함수이며, Promise를 반환해요. 그래서 async/await를 사용하거나 React의 use 함수를 활용해서 값을 받아와야 합니다.
참고로 Next.js 14 버전 이전까지는 동기 함수였는데, Next.js 15 버전에서도 이전 버전 호환을 위해 동기 방식으로 사용하는 게 가능하지만, 앞으로 이 방식은 사라질 예정입니다.
cookies 함수는 동적 API에 속해 있어요. 반환값을 미리 알 수 없기 때문에, 레이아웃(layout)이나 페이지에서 사용하게 되면 해당 라우트(route)가 동적 렌더링(dynamic rendering)으로 변환됩니다.
.delete 메서드는 아래 조건에서만 사용할 수 있습니다:
1. 서버 액션(Server Action)이나 라우트 핸들러(Route Handler) 안에서 호출해야 합니다.
2. .set을 호출한 같은 도메인이어야 합니다. 만약 와일드카드 도메인(wildcard domain)을 사용한다면, 세부 서브도메인이 정확히 일치해야 하며, 같은 프로토콜(HTTP 또는 HTTPS)에서 실행되어야 합니다.
HTTP 프로토콜 특성상 스트리밍(streaming) 시작 이후에는 쿠키 설정이 불가능하므로, 쿠키를 설정할 때는 서버 액션이나 라우트 핸들러 내에서 .set 메서드를 호출해야 해요.

서버 컴포넌트에서 쿠키 동작 이해하기

서버 컴포넌트(Server Components)에서 쿠키를 다룰 때 기억해야 할 점은, 쿠키가 기본적으로 클라이언트 쪽 저장소라는 사실입니다. 즉, 쿠키는 브라우저에 저장되어서 HTTP 요청과 함께 서버에 전달되는 데이터인데, 서버 컴포넌트는 서버에서 렌더링되기 때문에 쿠키 정보를 정확히 반영하기 위해선 쿠키를 비동기적으로 불러와야 해요.

여기서 조금 더!

서버 컴포넌트에서는 쿠키 데이터에 접근할 때마다 클라이언트(브라우저)에서 전송된 쿠키를 읽는 느낌이라고 생각하면 편합니다. 그래서 쿠키가 바뀌면 서버 컴포넌트도 동적으로 다시 렌더링할 수밖에 없어요. 이 과정이 바로 Next.js가 동적 API로 취급하는 이유죠.

또한, 서버 컴포넌트 내에서 cookies().get() 같은 API를 편리하게 호출할 수 있게 됐지만, 이 과정이 비동기적 처리임을 잊지 마세요. 그래서 async 함수 안에서 쿠키를 다뤄야 하며, 그렇게 해서 받아온 값으로 컴포넌트를 렌더링해야 합니다.

이런 점들을 잘 이해하고 사용하면, Next.js에서 쿠키 기반 인증이나 세션 관리 같은 기능을 더 안정적이고 자연스럽게 구현할 수 있습니다! 궁금한 점 있으면 언제든 물어보세요! 😊

서버 컴포넌트(Server Components)에서 쿠키를 읽을 수 있는 이유는 클라이언트(브라우저)가 HTTP 요청 헤더에 쿠키 데이터를 함께 보내기 때문이에요. 즉, 서버 쪽에서 요청이 올 때 쿠키 정보를 받을 수 있는 거죠.
하지만 서버 컴포넌트에서 쿠키를 직접 설정(set)하는 건 불가능해요. 심지어 라우트 핸들러(Route Handler)나 서버 액션(Server Action)을 써도 마찬가지예요. 왜냐하면 쿠키는 실제로 서버가 아니라 클라이언트, 즉 브라우저가 저장하기 때문입니다.

서버는 클라이언트(브라우저)에게 Set-Cookie라는 응답 헤더를 통해 "이 쿠키를 저장해 달라"는 명령만 보낼 수 있어요. 쿠키 저장 자체는 브라우저가 처리하죠. 그래서 쿠키 상태를 변경하는 작업(예: .set, .delete, .clear)은 반드시 라우트 핸들러나 서버 액션 내에서 해야 해요. 그래야 응답 헤더를 통해 적절한 쿠키 저장 명령을 포함시킬 수 있기 때문입니다.

예제들

쿠키 가져오기 (Getting a cookie)

import { cookies } from "next/headers";

export default function ServerComponent() {
  const cookieStore = cookies();
  const token = cookieStore.get("token")?.value;

  return <div>{token ? `토큰 값: ${token}` : "토큰이 없습니다."}</div>;
}

위 예시는 서버 컴포넌트에서 쿠키를 읽는 간단한 방법을 보여줘요. 요청 헤더에서 쿠키 데이터를 받아서 token이라는 이름의 쿠키가 있으면 값을 보여주고, 없으면 '토큰이 없습니다'라는 메시지를 띄우는 식이죠.

쿠키 설정하기 (Setting a cookie) - 라우트 핸들러 예시

import { NextResponse } from "next/server";

export async function POST() {
  const response = NextResponse.json({ message: "쿠키가 설정되었습니다!" });
  response.cookies.set("token", "abc123", { httpOnly: true, maxAge: 60 * 60 * 24 });

  return response;
}

쿠키를 설정하고 싶을 땐 서버 컴포넌트가 아니라 이런 라우트 핸들러에서 응답 헤더에 Set-Cookie를 포함시켜서 브라우저에게 전달해야 해요. httpOnly 옵션을 쓰면 자바스크립트에서 쿠키가 조작되는걸 막아 보안성을 높일 수도 있어요.

팁: 쿠키 사용 시 주의사항

쿠키는 용량 제한(보통 4KB)이 있어 너무 많은 데이터를 넣으면 안 돼요.
인증용 토큰 같은 민감한 정보는 httpOnly와 secure 옵션을 설정해 보안을 강화하세요.
클라이언트에서 document.cookie로 접근 가능한 쿠키와 서버에서 읽는 쿠키가 다를 수 있으니 목적에 맞는 쿠키 설정이 필요합니다.

쿠키는 웹에서 사용자 상태와 인증 정보를 관리하는 데 정말 중요해요. 서버와 클라이언트가 함께 작동해야 하니까 이 점 꼭 기억하면서 코딩해 보세요!

Next.js에서 쿠키를 다룰 때 await cookies() 메서드를 사용하면 편리하게 쿠키 값을 가져올 수 있어요.

예를 들어, 특정 이름을 가진 쿠키 하나만 가져오고 싶다면 아래처럼 하면 됩니다:

import { cookies } from "next/headers";

export default async function Page() {
  const cookieStore = await cookies();
  const theme = cookieStore.get("theme"); // 'theme'이라는 이름의 쿠키 가져오기
  return "...";
}

cookieStore.get('name')은 해당 이름을 가진 첫 번째 쿠키를 반환하고, 만약 쿠키가 없으면 undefined를 돌려주니 존재 여부를 꼭 체크해주는 게 좋아요.

여러 개 혹은 모든 쿠키 가져오기

만약 특정 이름에 해당하는 쿠키가 여러 개 있거나, 아예 전부 다 가져오고 싶다면 getAll() 메서드를 사용하면 됩니다. 아래처럼 쓰면 되죠:

const allThemeCookies = cookieStore.getAll("theme"); // 'theme'이라는 이름의 모든 쿠키 가져오기
const allCookies = cookieStore.getAll(); // 이름 지정 없이 모든 쿠키 가져오기

getAll()은 배열을 반환해주기 때문에, 여러 개의 같은 이름 쿠키를 한 번에 다루거나 쿠키를 일괄 처리할 때 유용해요.

참고 팁!

서버 컴포넌트에서만 next/headers 모듈의 cookies()를 쓸 수 있습니다.
클라이언트 사이드에서 쿠키를 읽으려면 일반적인 JavaScript document.cookie를 써야 한다는 점도 기억하세요.
보안상 쿠키를 다룰 땐 HttpOnly, Secure 옵션들도 잘 설정하는 습관이 필요합니다.

필요한 쿠키를 깔끔하게 가져와서 편리한 상태 관리나 유저 테마 설정 등에 활용해 보세요!

자, Next.js 13에서 Cookies API를 사용하는 방법에 대해 이야기해볼게요. Server Component나 서버 관련 코드에서 쿠키를 쉽게 조회하고, 설정할 수 있는 예제인데요.

먼저, 쿠키를 읽어오는 코드입니다:

import { cookies } from "next/headers";

export default async function Page() {
  // 쿠키 스토어를 불러오고
  const cookieStore = await cookies();

  // 모든 쿠키를 가져와서 JSX로 렌더링합니다
  return cookieStore.getAll().map((cookie) => (
    <div key={cookie.name}>
      <p>Name: {cookie.name}</p>
      <p>Value: {cookie.value}</p>
    </div>
  ));
}

여기서 cookies() 함수는 서버에서 현재 요청에 포함된 쿠키들을 읽어오는 API예요. getAll()을 호출하면 모든 쿠키가 배열로 반환되고, 각 쿠키는 이름과 값뿐만 아니라 추가 옵션들도 포함할 수 있어요. 이걸 React 컴포넌트에서 렌더링하는 거죠.

쿠키 설정하기

이제 쿠키를 새로 설정하는 방법입니다. Next.js에서는 서버 액션이나 Route Handler 내부에서 cookies().set() 메서드를 사용해서 쿠키를 만들 수 있어요.

"use server";

import { cookies } from "next/headers";

export async function create(data) {
  const cookieStore = await cookies();

  // 기본적으로 name이라는 이름과 'lee'라는 값으로 쿠키 설정
  cookieStore.set("name", "lee");

  // secure 옵션(HTTPS에서만 전송)
  cookieStore.set("name", "lee", { secure: true });

  // 좀 더 상세 옵션 지정 가능 (httpOnly, path 등)
  cookieStore.set({
    name: "name",
    value: "lee",
    httpOnly: true,
    path: "/",
  });
}

여기서 httpOnly 옵션은 클라이언트 JavaScript에서 쿠키에 접근하는 걸 막아서 보안에 도움이 되고, secure 옵션은 HTTPS 연결에서만 쿠키가 전송되도록 하는 거예요. 또, path 옵션을 지정하면 쿠키가 특정 경로에서만 유효하도록 할 수 있답니다.

알아두면 좋은 팁

이 API는 서버 측에서만 동작하기 때문에, 클라이언트 측에서 쿠키를 다루려면 document.cookie를 사용해야 해요.
쿠키는 보통 사용자 인증, 세션 관리, UI 상태 유지 등에 쓰이는데, 민감한 정보는 꼭 httpOnly나 secure 옵션을 함께 설정해서 노출되거나 탈취되지 않도록 주의하세요.
Next.js 13부터 도입된 이 cookies API는 사용하기 훨씬 편리해졌는데, 기존의 set-cookie 헤더 직접 조작보다 안정적이고 직관적이랍니다.

쿠키 다루기가 어려울 수 있는데, 이렇게 서버 컴포넌트 안에서 직관적으로 쓰니까 훨씬 편리해졌죠? 필요에 따라 쿠키를 갖고 놀아보세요! 혹시 더 궁금한 거 있으면 알려주세요.

쿠키가 존재하는지 확인하기

Next.js에서 쿠키가 있는지 확인하고 싶을 때는 await cookies() 메서드와 has(name) 메서드를 조합해서 사용하면 됩니다.

import { cookies } from "next/headers";

export default async function Page() {
  const cookieStore = await cookies();
  const hasCookie = cookieStore.has("theme"); // 'theme' 쿠키가 있는지 확인
  return hasCookie ? "쿠키가 존재해요!" : "쿠키가 없어요!";
}

위 코드처럼 간단하게 특정 이름의 쿠키가 있는지 true/false로 확인할 수 있어요. 서버 컴포넌트에서 쿠키를 읽거나 분기 처리를 해야 할 때 유용하죠.

쿠키 삭제하기

쿠키를 삭제하려면 기본적으로는 만료일자를 과거로 설정해줘야 해요. 서버 측에서 쿠키를 삭제하는 방법을 살펴볼게요.

import { cookies } from "next/headers";

export async function DELETE() {
  const cookieStore = cookies();
  cookieStore.delete("theme", { path: "/" }); // 'theme' 쿠키 삭제
  return new Response("쿠키 삭제됨", { status: 200 });
}

cookieStore.delete() 메서드로 삭제할 쿠키 이름과 경로를 지정해주면 됩니다.
쿠키가 특정 경로나 도메인에 묶여 있다면, 삭제할 때도 그 경로나 도메인을 맞춰줘야 완전히 삭제가 돼요.
만약 클라이언트 쪽에서 쿠키를 삭제하고 싶다면, 자바스크립트의 document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;" 같은 방법을 쓰면 됩니다.

조금 더 알아두면 좋은 점

Next.js의 cookies()는 서버 컴포넌트나 API 라우트 등 서버 측에서만 사용할 수 있어요.
쿠키는 보안상 중요한 정보를 담기보다는 세션식별자나 사용자 선호 설정 정도로 사용하는 게 좋아요.
Secure, HttpOnly, SameSite 같은 옵션도 꼭 설정해서 보안을 강화하는 습관을 들이면 좋답니다!

다음에 쿠키 관련해서 직접 실습하면서 또 도움이 될 만한 팁을 공유할게요!

쿠키를 삭제하는 방법에는 크게 세 가지가 있어요. 여기서는 그 중 두 가지를 소개해드릴게요.

1. `delete()` 메서드 사용하기

Next.js에서 제공하는 cookies 객체에 있는 delete() 메서드를 사용해서 간단하게 쿠키를 지울 수 있어요.

"use server";

import { cookies } from "next/headers";

export async function deleteCookie() {
  (await cookies()).delete("name"); // 'name'이라는 이름의 쿠키를 삭제해요.
}

await cookies()를 호출해서 현재 쿠키 객체를 받아오고, 그 안에서 delete('name')을 호출해서 특정 쿠키를 삭제합니다.
서버 컴포넌트 또는 서버 함수 안에서만 쓸 수 있다는 점 참고하세요.

2. 같은 이름으로 빈 값 설정하기

사실, 쿠키를 삭제하는 또 다른 방법은 같은 이름으로 빈 값을 설정하고 만료 시간을 과거로 설정하는 거예요. 이렇게 하면 브라우저가 해당 쿠키를 지우게 됩니다.

import { cookies } from "next/headers";

export async function deleteCookieBySetting() {
  (await cookies()).set({
    name: "name",
    value: "", // 빈 값으로 설정
    expires: new Date(0), // 만료 시간을 과거로 설정해서 즉시 만료
    path: "/",
  });
}

set() 메서드를 이용해 만료 시점을 과거로 지정하면 쿠키가 삭제된 것과 같은 효과를 냅니다.
직접 쿠키 값을 칼같이 삭제하지 않아도 되니, 간단한 상황에 유용하죠.

참고: 쿠키 삭제 시 주의할 점

쿠키는 도메인, 경로(path), 보안 설정(secure, httpOnly)에 따라 영향을 받습니다.
쿠키를 삭제할 때도 같은 도메인과 경로를 명시해줘야 확실히 삭제할 수 있어요.
만약 삭제가 제대로 안 된다면, 해당 쿠키의 path나 domain 설정을 다시 한 번 확인해 보세요.

쿠키를 다룰 때는 이렇게 여러 방법이 있으니, 상황에 맞게 골라 쓰시면 됩니다. 서버에서 직접 쿠키를 관리하는 경우라면 delete()를, 클라이언트 쪽에서는 빈 값과 만료 시간을 조정하는 방법이 인기가 많아요.

필요하면 다음에 세 번째 방법도 알려드릴게요!

Next.js의 서버 컴포넌트에서 쿠키를 삭제하는 방법에 대해 알아볼게요. 보통 쿠키를 "삭제"하려면, 해당 쿠키의 만료 시간을 즉시 만료시키거나, 빈 값으로 덮어쓰는 두 가지 방법을 사용해요.

1. 쿠키를 빈 값으로 덮어쓰기

아래 코드는 cookies().set() 메서드를 사용해서 쿠키 이름을 빈 문자열로 설정하는 예시입니다. 이렇게 하면 쿠키 값이 빈 문자열로 바뀌지만, 실제로 쿠키는 브라우저에 그대로 남아 있을 수 있어요.

'use server'

import { cookies } from 'next/headers'

export async function delete(data) {
  (await cookies()).set('name', '')
}

2. maxAge를 0으로 설정해 바로 만료시키기

쿠키를 완전히 삭제하려면 maxAge 옵션을 0으로 설정해서 쿠키 만료 시간을 즉시 지난 값으로 설정하는 방법이 더 확실해요.

'use server'

import { cookies } from 'next/headers'

export async function delete(data) {
  (await cookies()).set('name', 'value', { maxAge: 0 })
}

maxAge는 초 단위로 시간을 받기 때문에 0을 주면 곧바로 만료 처리되는 거죠.

흔히 묻는 질문

질문	답변
`maxAge` 대신 `expires`를 써도 되나요?	네, 가능합니다. `expires`는 날짜 객체를 받아서 쿠키 만료 시간을 설정하는 방법이에요.
빈 문자열로 설정하면 쿠키가 삭제되나요?	사실상 값만 비워질 뿐 구버전 브라우저나 일부 환경에서는 쿠키가 살아 있을 수 있어요.
`maxAge: 0` 와 `maxAge: -1` 차이는?	둘 다 쿠키를 즉시 만료시키지만, 보통 `0`을 사용해요. 음수는 브라우저에 따라 달라질 수 있어요.

마무리

Next.js 13 서버 컴포넌트 기능에서 새로 제공하는 cookies API는 훨씬 간편하게 쿠키를 다룰 수 있도록 도와주지만, 조금만 주의하면 쿠키 삭제도 깔끔하게 할 수 있어요!

쿠키를 삭제할 땐 꼭 제대로 만료 시간을 설정해서, 원하지 않는 쿠키가 백그라운드에 남지 않도록 관리해주세요. 쿠키 조작에 대해 더 궁금한 점 있으면 언제든 물어봐주세요!

아래는 cookies 관련 변경 사항을 정리한 표예요.

Version	Changes
`v15.0.0-RC`	`cookies`가 이제 비동기(async) 함수로 변경되었어요. 업그레이드할 때 도움이 되는 codemod도 제공됩니다.
`v13.0.0`	`cookies` 기능이 처음 도입되었어요.

참고로, cookies가 비동기 함수가 된 이유는 서버에서 쿠키를 처리할 때 비동기 작업이 필요한 경우가 많기 때문이에요. 예를 들어, 데이터베이스 조회나 외부 API 호출을 하면서 쿠키 값을 확인하거나 수정할 때 자연스럽게 비동기로 처리하는 게 더 효율적이죠.

이런 변경사항을 반영하지 않으면 기존에 동기 함수처럼 호출하던 코드에서 문제가 발생할 수 있으니, 꼭 공식 codemod를 활용해서 코드를 자동 변환해 보는 걸 추천드려요!

Next.js 15에서 쿠키 쉽게 다루는 방법