[Next.js]Next.js 프로젝트 Vercel 배포시 [next-auth][error][CLIENT_FETCH_ERROR] 해결

일단 next-auth를 사용시 환경변수에 NEXTAUTH_URL="프로젝트 URL"을 지정해주어야한다. 그래서 Vercel settings 탭에서 Environment Variables 에 들어가 환경변수를 입력해 주었다.

하지만 그래도 콘솔탭에 들어가보니 [next-auth][error][CLIENT_FETCH_ERROR] 에러가 떠있었고, 관련된 이슈를 찾다가 어떤 분이 쓰신 글을 보게됐다.

api 라우트 관련 공식문서를 보니, next.js에서 서버사이드 함수를 동작할 때, api 엔드포인트로 pages/api에 있는걸 /api/* 로 처리하게 되는데,
pages와 같은 레벨에 api 폴더가 존재하면 여기로 매핑이 바뀌어서 next-auth 사용에 있어서 경고가 뜬 것 같다.

나는 pages와 같은 레벨에 api 폴더를 사용하고 있었고, api폴더이름을 apis로 변경하고나서 다시 빌드를 해보니 에러메세지가 사라졌다.