[React] next.js ssr api요청에 쿠키 포함해서 보내기

홈페이지에서 사용자 인증에 대한 jwt 토큰을 쿠키에 저장하고,

api요청 시 해당 쿠키가 같이 전송되며 사용자 인증을 처리하는 경우가 있습니다.

 

Next.js를 사용하여 서버 사이드 렌더링을 통해 API요청으로 데이터를 받아올 때

쿠키가 포함이 안 돼서 데이터를 받아오지 못하는 경우가 있습니다.

 

이때 Next.js에서 제공하는 cookies 함수를 사용하여 쿠키를 직접

포함시켜 보낼 수 있습니다.

| cookies

cookies함수는 next.js 13부터 제공되는 함수로

서버 컴포넌트에서 쿠키를 읽고 쓸 수 있도록 해주는 함수입니다.

get() 메서드

cookie함수의 get(name) 메서드로 쿠키의 이름을 사용해 쿠키의 이름과 값을 포함하는 객체를 반환할 수 있습니다.

만약 이름이 포함된 쿠키가 없을 경우 undefined를 반환하게 됩니다.

const Page = () => {
  const cookieStore = cookies();
  const id = cookieStore.get("id");

  console.log(id); // { name: "id", value: "12345678" }

  return ...
};

getAll() 메서드

기본적으로 get(name) 메서드와 비슷하지만 일치하는 이름의 모든 쿠키를 배열로 가져옵니다.

이름을 지정하지 않으면 사용 가능한 모든 쿠키를 가져옵니다.

has(name) 메서드

일치하는 이름에 해당하는 쿠키의 존재 유무에 따른 true, false 불리언 값을 반환합니다.

const Page = () => {
  const cookieStore = cookies();
  const hasId = cookieStore.get("id");

  console.log(hasId); // id 쿠키가 있으면 true 아니면 false

  return ...
};

set(name, value, options) 메서드

쿠키의 이름, 값, 옵션을 가져와서 외부 요청 쿠키를 설정합니다.

다만 http는 스트리밍이 시작한 후 쿠키를 설정하는 것을 허용하지 않는다고 합니다.

따라서 서버 액션이나 라우트 핸들러에서 사용해야 합니다.

"use server";

import { cookies } from "next/headers";

const createCookie = async () => {
  const cookieStore = cookies();
  cookieStore.set("test", "abcdefghi", { secure: true });
};

또한 동일한 이름의 빈 값을 갖는 쿠키를 생성할 수도 있습니다.

"use server";

import { cookies } from "next/headers";

const sameName = async () => {
  const cookieStore = cookies();
  cookieStore.set("test", "");
};

maxAge를 0으로 설정하면 쿠키를 즉시 만료시킬 수 있습니다.

"use server";

import { cookies } from "next/headers";

const expire = async () => {
  const cookieStore = cookies();
  cookieStore.set("test", "abcdefghi", { maxAge: 0 });
};

delete(name) 메서드

이름과 일치하는 쿠키를 삭제할 수 있습니다.

다만 서버 액션이나 라우트 핸들러에서만 삭제가 가능합니다.

"use server";

import { cookies } from "next/headers";

const deleteCookie = async () => {
  const cookieStore = cookies();
  cookieStore.delete("test");
};

| 서버 사이드에서 쿠키 포함해서 요청 보내기

서버  사이드에서 api요청 시 쿠키를 포함시켜서 보내고 싶으면

위에 설명한 cookies를 활용하여 요청 헤더에 포함시키면 됩니다.

 

먼저 api요청 함수를 하나 만들어 주겠습니다.

const myInfo = async (cookie?: string): Promise<MyInfo> => {
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_BASE_URL}/users/me`,
    {
      headers: {
        Cookie: cookie || "",
      },
    }
  );
  
  const data = await rest.json()

  return data;
};

그리고 해당 함수를 사용하여 컴포넌트에서 요청을 보내면 됩니다.

const Mypage = async () => {
  const cookieStore = cookies();
  const decodedCookie = decodeURIComponent(cookieStore.toString());
  
  const myInfo = await myInfo(decodedCookie);
  
  return (
    <div>
      <div>{myInfo.name}</div>
    </div>
  );
};

export default Mypage;

만약 쿠키를 디코딩하는 게 필요하다면 decodeURIComponent 함수를 사용해 줘야 올바른 쿠키가 전송됩니다.