[React] next-auth > CLIENT_FETCH_ERROR 해결 방법

React + Next.js + NextAuth.js 환경에서 Sign-In 요청 후 404 페이지로 이동하는 에러 발생 시 해결방법입니다.

아마 아래와 같은 디버그 에러를 만나게 될텐데요, 

이런 경우는 [...nextauth].ts의 경로를 확실히 수정해야 합니다.

[next-auth][error][CLIENT_FETCH_ERROR]  https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON {error: {…}, url: '/api/auth/providers', message: 'Unexpected token '<', "<!DOCTYPE "... is not valid JSON'}

 

/src/pages/api/auth/[...nextauth].tsx

참고: https://authjs.dev/guides/basics/initialization

 

 

개발환경

"next": "14.0.4",

"next-auth": "^4.24.5",