Next Auth & Vercel 에러 해결

상황

소셜로그인 작업을 마치고 Vercel에서 테스트하는 과정에서 오류가 발생했고, 해결하기 위해 시도했던 방법들을 작성하려고 한다.

문제

next auth의 signIn() 함수를 실행하면 500 Internal Server Error가 발생한다.

해결 방법

주소에 _logs를 붙여서 접속하면 Runtime Log를 확인 할 수 있다.
ex) https://[기본주소]/_logs

1. NEXTAUTH_URL

• .env 파일에 NEXTAUTH_URL 추가

NEXTAUTH_URL="https://[기본 주소]/"

참고
https://next-auth.js.org/configuration/options#nextauth_url

2. prisma generate

Runtime Log

Prisma has detected that this project was built on Vercel, which caches dependencies.
This leads to an outdated Prisma Client because Prisma's auto-generation isn't triggered.
To fix this, make sure to run the prisma generate command during the build process.

• package.json 파일에서 scripts 추가
  

참고
https://www.prisma.io/docs/guides/other/troubleshooting-orm/help-articles/vercel-caching-issue

3. NEXTAUTH_SECRET

Runtime Log

[next-auth][error][NO_SECRET]
https://next-auth.js.org/errors#no_secret Please define a secret in production. MissingSecret [MissingSecretError]: Please define a secret in production.

• .env 파일에 NEXTAUTH_SECRET 추가

NEXTAUTH_SECRET="랜덤으로 구성된 문자열"

• [...nextauth].ts 에 secret 추가
  

4. redirect url

카카오
https://[기본 주소]/api/auth/callback/kakao
네이버
https://[기본 주소]/api/auth/callback/naver
구글
https://[기본 주소]/api/auth/callback/google