[Next.js] Vercel 배포 중 오류 해결하기

^^...;; 나름 신중히 검토하고 1차배포했다고 생각했는데 빌드과정에서 오류폭탄남
하나씩 해결해보자...

❌ pages폴더 내에 styled파일이 있는 경우

next.js 프레임워크의 경우, pages파일안에 있는 루트대로 페이지를 생성해주는 아주 편한 기능을 가지고 있다. 그에 맞춰서 룰을 잘 지켜주어야 원하는대로 빌드가 가능하다.

하지만 이번 프로젝트에서 sylted-components를 사용중이기 때문에 별 생각없이 페이지와 같이 styled.ts 파일을 넣어주었다.

빌드 failed 🥲

✅ 해결완료

기존 styles디렉토리 하위에 pages 디렉토리를 생성하고, 이 위치로 styled.ts파일들을 모두 빼주었다.

❌ next-auth 로그인 페이지가 오류인 경우

로그인 페이지에서 next-auth를 사용하여, 카카오, 구글, 네이버, 페이스북의 간편로그인 기능을 사용했다. 그런데 화면이 나오지않아서, 콘솔창의 네트워크탭을 보았다.
여기에서는 500 error라고만 알려주고 자세히 어떤 에러인지 알수없다.

이럴때에는 vercel 사이트에서 자세히 확인해볼 수 있다.(콘솔창에도 나오긴 하는데 콘솔보다 보기편함)

프로젝트를 배포하고보면 위 사진처럼 Functions 탭에 들어갈 수 있다.
이 탭에 들어간 상태에서 에러를 발생시키면 자세한 로그를 볼 수 있다.
아쉽게 캡쳐를 안해놔서 ㅠㅠ 지금은 없어졌는데,

[next-auth][error][CLIENT_FETCH_ERROR]
https://next-auth.js.org/errors#client_fetch_error invalid json response body at https://EXAMPLE.com/api/auth/session reason: Unexpected token I in JSON at position 0 { error: ...

검색해서 비슷한 예시를 찾았다.
나도 [next-auth][error][CLIENT_FETCH_ERROR] 가 나왔었다.

일단 이 부분은 환경변수 설정이 잘 되어있는지 먼저 확인해주어야 한다.

프로젝트를 작업할 때 .env 파일에 환경변수를 넣고 작업했을텐데,

각자의 프로젝트에서 위 페이지의 상단 Settings/Environment Variables 탭으로 들어가서 환경변수를 추가, 삭제, 수정할 수 있다.
당연히 .env 파일에 있는 환경변수들을 모두 정확히 입력해주어야 한다.
하지만 분명히 확인했는데도 오류가 난다면 ...

✅ 해결 방법

중요한 점은, 환경변수에 NEXTAUTH_URL와 NEXTAUTH_SECRET를 꼭!!! 넣어주어야 한다.

NEXTAUTH_URL

• 배포완료하고 사용될 도메인.
• 나의 경우에는 https://need-compliments-sandy.vercel.app/
  난 이 URL에서 auth/signin으로 이동하여 로그인을 하도록 페이지를 구성했는데, 이 루트가 아닌 커스텀 패스를 추가하였다면, 다르게 지정해주어야한다.
  아래 공식문서를 참고했다.
  

NEXTAUTH_SECRET

• 이게 진짜 ㅠㅠ 삽질했음.
• 왜냐하면 아래 터미널창에서 볼 수 있듯이, devleopment에서는 오류가 안나고 Warning이라고만 뜬다...배포해서 프로덕트 레벨에서 꼭 있어야 함.
  
  하.. ㅠㅠ 로그 제대로 확인하는 습관을 들여야겠다.

이 부분 역시 공식문서를 참고했다.

시크릿키를 어떻게 만드냐면 이 부분도 공식문서 참고.

위 문서에서 말하듯이 openssl rand -base64 32를 터미널에서 실행시키고 나온 값을 NEXTAUTH_SECRET 값으로 사용하면 된다.

(프로젝트가 진행중이므로 배포관련 오류가 나면 또 추가하겠음)

• 추가: fork한 레포 자동최신화 + vercel로 자동배포하기

ref

• https://next-auth.js.org/configuration/options
• https://effectivesquid.tistory.com/entry/Base64-%EC%9D%B8%EC%BD%94%EB%94%A9%EC%9D%B4%EB%9E%80