글

라벨이 Nextjs 미들웨어 쿠키 설정인 게시물 표시

Next.js: middleware.ts에서 다중 쿠키 추출 및 조작 에러 해결법

이미지
3초 요약: 이렇게 고치세요 원인: 미들웨어 안에서 request.cookies.set() 이나 request.headers.set() 을 호출해도, 그 변경이 응답이나 다음 라우트로 자동 전파되지 않음 해결: 요청 헤더는 NextResponse.next({ request: { headers } }) 로, 브라우저에 내려줄 쿠키는 같은 응답의 response.cookies.set() 으로 각각 명시적으로 설정 주의: Cookie 헤더를 통째로 덮어쓰면 세션 토큰 외의 다른 쿠키가 전부 사라짐 — 기존 값에 이어붙여야 함 const response = NextResponse.next({ request: { headers: requestHeaders } }); response.cookies.set('session-token', newSessionToken, { httpOnly: true }); ↓ 왜 이런 에러가 나는지 원리 보기 Next.js App Router 환경에서 인증 토큰을 서버 미들웨어( middleware.ts ) 수준에서 실시간으로 검증하고 갱신하려다, 새로 설정한 쿠키가 브라우저에 구워지지 않거나 다음 페이지에서 감지되지 않는 문제로 골머리를 앓으신 적이 있을 겁니다. 기존 Node.js 서버나 Route Handler를 짜던 감각으로 res.setHeader() 같은 Express식 객체를 찾거나 next/headers 의 cookies().set() 을 미들웨어에 그대로 쓰면, 애초에 미들웨어 함수에는 res 인자가 없고 cookies().set() 도 미들웨어 밖에서만 허용되는 API라 즉시 에러가 나서 바로 알아챌 수 있습니다. 정작 까다로운 건 NextRequest / NextResponse 의 올바른 API( request.cookies.set() , request.headers.set() )를 그대로 썼는데...