문제 발생
TMDB API를 이용해 인기 영화 목록을 무한 스크롤 기능으로 가져오는 코드를 작성했는데 클라이언트 컴포넌트에서 axios를 이용한 데이터 패칭 함수를 실행하면 401(unauthorized)오류가 발생했습니다.
리액트 쿼리를 사용해 1페이지는 서버 사이드에서 가져오게 한 코드는 정상적으로 작동 했는데, 이상하게 클라이언트 사이드에서만 해당 문제가 발생했습니다.
401오류라면 액세스 토큰 전달 문제가 맞는 거 같아 액세스토큰을 하드코딩해서 문제가 해결되나 확인해보니 해결되더군요.
원인
process.env.TMDB_ACCESS_TOKEN이 문제였습니다.
Next.js에서는 환경 변수를 사용할 때 서버 사이드에서만 환경 변수가 처리되며, 클라이언트 사이드에서는 기본적으로 환경 변수가 포함되지 않습니다.
이로 인해, 서버 사이드 렌더링 시에는 process.env.TMDB_ACCESS_TOKEN 값이 정상적으로 사용되지만, 클라이언트 사이드에서 실행될 때는 undefined가 되어 API 요청 시401(Unauthorized) 오류가 발생된 것입니다.
클라이언트 사이드에서 환경 변수를 사용하기 위해 변수명 앞에NEXT_PUBLIC_을 붙여서 공개 환경 변수를 만들어야 합니다.
해결
클라이언트 사이드에서도 접근할 수 있도록 .env.local 환경 변수 파일을 열어 환경 변수의 이름을 NEXT_PUBLIC_TMDB_ACCESS_TOKEN으로 변경했습니다
이러한 변경을 통헤 서버 사이드와 클라이언트 사이드 모두에서 TMDB API에 인증된 요청을 보낼 수 있게 되어 문제가 해결되었습니다.
*해당 환경 변수가 사용되는 코드 내에서도 변경된 이름으로 환경 변수를 사용하도록 업데이트해야합니다.
**변경사항을 적용한 후 서버를 재시작하고 애플리케이션을 다시 빌드해야합니다.
