Next.js app router의 쿠키값을 어떻게 세팅해야 할까요?

지금 시점에서는 이미 구현하셨으리라 보지만, 알고 있는 몇가지를 적어봅니다. 1. middleware middleware는 브라우저(client)의 페이지 요청을 프론트 서버인 next.js에서 받는 중간 과정에 놓여있습니다. 이를 edge runtime이라는 이름으로도 부릅니다. 이 미들웨어의 기본 모듈은 브라우저의 요청 해더를 조회할 수 있고, 이 해더 안의 cookie 객체를 이용하면 쿠키를 조회나 설정할 수 있습니다. 2. client component + route handler server component에서 발급받은 jwt를 props를 통해 client component로 넘기고, 여기서 route handler를 호출하고 route handler에서 next의 cookies 모듈을 쓰거나 응답 해더에서 직접 설정하는 방법이 있습니다. 3. store 저장소를 쿠키가 아닌 메모리로 바꾸어, server component에서 발급받은 jwt를 context api나 상태 관리 라이브러리를 이용해서 store에 저장하고 이 provider를 root에 두어 내리는 방법이 있습니다. 다만 이 경우 쿠키와 달리 secure나 httpOnly를 걸 수 없고 react dev tools와 같은 브라우저의 확장 도구를 통해 들여다 볼 수 있어서 보안 상의 이슈가 있을 수 있습니다. 보통 라우트 보호는 1의 방법을 사용하지만, crud 요청에서 unauthorized가 발생해 jwt를 재발급하는 과정이 필요한 때는 1로는 해결할 수 없습니다. 요청이 실패했다고 하여 페이지를 새로고침할 수는 없으므로... 그래서 통합 관리를 생각하면, 라우트 보호는 middleware에서 refresh token을 조회하여 그 사용 가부를 확인만 하는데 그치고, access token은 2 또는 3의 방법을 사용하되, 재사용 가능한 방식으로 구조화하는 것이 좋습니다. 또 access token의 유효기간에 따라서도 방법이 갈릴 수 있으니 여러 방식에서 테스트하며 상황에 맞는 방법을 찾는 것을 권장드립니다. app router에서 jwt 제어는 생각보다 손이 꽤 많이 갑니다.