JWT로 인증을 처리하는 백엔드 서버를 사용하는데, JWT가 만료되어 새로운 JWT를 전달해줘도 Next.js의 서버 컴포넌트에서 fetch가 수행되어 실제 클라이언트의 응답으로 새로운 JWT가 쿠키로 전달되지 않았다.
쿠키가 전달되지 않은 원인
Next.js 서버 컴포넌트에선 외부 API를 호출하고, 응답에 포함된 쿠키를 클라이언트로 자동으로 전달하지 않는다.
이를 해결하기 위해선 Set-Cookie 헤더를 수동으로 클라이언트 응답에 포함시켜야 한다.
먼저, fetch를 통해 백엔드 API에 요청을 보낸다. 다음으로 응답에 포함된 Set-Cookie 헤더를 Next.js 클라이언트 응답에 수동으로 추가하면 된다.
Next.js에서 외부 백엔드 API를 호출할 때는 fetch를 사용한다. fetch를 사용하여 백엔드 API로부터 데이터를 요청하고, 응답에 포함된 쿠키를 클라이언트에 전달하려면 어떻게 해야 할까?
스프링 프레임워크를 자주 사용한다면 Filter 같은 개념으로 전역적으로 처리하면 편하다는 생각이 들 것이다.
Next.js Middleware
Next.js에서 Middleware는 서버 사이드에서 요청을 가로채어 요청을 처리하거나 수정하는 기능을 제공한다. 미들웨어는 클라이언트의 요청을 서버가 처리하기 전에 실행되며, 서버 응답을 수정하거나, 인증, 권한 부여, 리다이렉션 등의 작업을 수행하는 데 사용할 수 있다.
middleware 동작 → 서버 컴포넌트 동작
middleware로 쿠키를 전달하기
Next.js에서 middleware를 사용하면 전역적으로 서버 측에서 외부 API의 응답을 받아서 클라이언트에 전달할 수 있다.
import { NextResponse } from 'next/server';
export async function middleware(request) {
// 외부 API 호출
const apiResponse = await fetch('https://api.example.com/data', {
method: 'GET',
});
// 응답에서 Set-Cookie 헤더 가져오기
const setCookieHeader = apiResponse.headers.get('set-cookie');
// Next.js 응답 생성
const response = NextResponse.next();
// 백엔드에서 받은 Set-Cookie 헤더를 클라이언트 응답에 추가
if (setCookieHeader) {
response.headers.set('set-cookie', setCookieHeader);
}
return response;
}
- 외부 API 호출:
fetch를 사용하여 외부 API를 호출한다. 이때, API가 반환하는 응답에 쿠키가 포함되어 있을 수 있다. Set-Cookie헤더 추출: 응답에서Set-Cookie헤더를 추출한다. 이 헤더에는 서버가 클라이언트에 전달하려는 쿠키 정보가 포함되어 있다.- Next.js 응답 생성:
NextResponse.next()를 사용하여 클라이언트로 반환할 응답을 생성한다. 서블릿 필터의filterchain.dofilter()와 유사하다.
- 응답에 쿠키 추가:
Set-Cookie헤더가 있다면, 이를 Next.js 응답에 추가한다. 클라이언트는 응답을 받으면서 백엔드 서버에서 설정한 쿠키를 사용할 수 있게 되었다.
정리
Next.js 서버에서 외부 API를 호출하고 그 응답에 포함된 쿠키를 클라이언트 응답에 전달하려면, Set-Cookie 헤더를 수동으로 클라이언트 응답에 추가해야 한다. fetch로 외부 API를 호출할 때 자동으로 쿠키가 클라이언트에 전달되지 않기 때문에, 필요한 쿠키를 수동으로 처리해야 한다.
Middleware를 사용해 전역적으로 처리하면 API 응답으로 받은 쿠키를 응답에 추가할 수 있다.
