Next14 cookies 사용하기

• next 14.1.0
• cookies ( next/headers )

서버에서 받아온 accessToken을 어딘가에 저장하고 특정페이지에서 백엔드로 어떤 요청을 accessToken을 header에 담아서 보내줘야 상황이였다.

이전 react 프로젝트의 경우 localStorage 등을 사용해서 처리했겠지만

next의 app router를 사용하는 현재 server component와 client component에서의 동작이 구분되어 server component에서 local storage를 사용하지 못하는 상황이라 다른 방법이 필요했다.

next/headers의 cookies를 사용하기로 하고 cookies 사용 방법을 알아봤다.

https://nextjs.org/docs/app/api-reference/functions/cookies

next 공식문서 내용 중 일부이다. 해당 내용을 토대로 이것저것 시도해보고 현재 확인되는 동작이다.

cookies().set()

[O] Router Handler( Client Component에서 요청 )에서 호출
[X] Router Handler( Server Component에서 요청 )에서 호출

cookies().get()

[O] Server Component에서 호출
[X] Client Component에서 호출

정리하면

SET -> client component에서 요청-> app/api/cookies/route.ts에서 cookies().set()
GET -> server component에서 cookies().get()

// route.ts

import { NextRequest, NextResponse } from "next/server";
import { cookies } from "next/headers";

export async function POST(request: NextRequest) {
  if (!request.body) {
    return NextResponse.json({ status: 400, message: "Missing request cookies body" });
  }
  const body = await request.json();

  if (!body.key || !body.value) {
    return NextResponse.json({ status: 400, message: "Missing request cookies body" });
  }
  cookies().set(body.key, String(body.value));

  return NextResponse.json({ status: 200 });
}