개발자
사내에서 블로그 어플리케이션을 만들고 있는데 Next js를 처음 적용하다보니 마주하는 문제들이 많아 해당 내용에 대해 아이디어를 얻고자 글을 남깁니다! 현재 로컬에서는 소셜 로그인 과정이 무리없이 동작 했는데 배포 이후 소셜 로그인을 진행할 때 redirect url로 페이지로 오는 과정에서 지정해둔 페이지가 아닌 메인 페이지로 오게 됩니다 도메인을 보면 redirect url로 지정해둔 경로이고 인가코드가 쿼리스트링으로 그대로 있는 상황입니다 이에 이어서 다른 페이지에서 새로고침을 하는 경우 다시 메인 페이지로 오는 에러가 있습니다 해결방법을 찾아봤을때 next.config.js 에서 해결하는 방법이 있다고 했는데 어떤 방식으로 적용해야하는지 감이 잡히질 않습니다.
답변 1
Next.js에서 소셜 로그인 구현 시 발생하는 redirect 문제는 다양한 원인이 있을 수 있습니다. 그 중 하나는 배포 환경에서 발생하는 경로 문제입니다. 먼저, 배포 환경에서 발생하는 문제인 경우, Next.js의 ' next.config.js ' 파일에서 ' async rewrites() ' 메서드를 사용하여 경로를 재정의해야 할 수 있습니다. 예를 들어, 소셜 로그인 콜백 URL이 ' /api/auth/callback '으로 지정되어 있다면, 다음과 같은 코드를 ' next.config.js ' 파일에 추가할 수 있습니다. 아래 코드에서 ' source '는 요청 경로를, ' destination '은 리다이렉트할 경로를 의미합니다. 이렇게 하면 콜백 URL이 ' /api/auth/callback '으로 오는 요청이 ' /pages/auth/callback '으로 리다이렉트됩니다. 또한, 로그인 성공 후 발생하는 redirect 문제는, 소셜 로그인 API에서 redirect URL을 지정할 때, 프로토콜과 도메인 주소가 정확하게 맞아야 하는 경우가 있습니다. 따라서, redirect URL을 지정할 때, 프로토콜과 도메인 주소를 정확하게 입력하는 것이 좋습니다. 또한, 다른 페이지에서 새로고침을 할 때 발생하는 문제는, 페이지가 로드될 때 필요한 데이터를 모두 로드한 후 페이지를 렌더링해야 합니다. 이를 위해, ' getStaticProps() ' 또는 ' getServerSideProps() ' 메서드를 사용하여 페이지를 로드할 때 필요한 데이터를 미리 불러올 수 있습니다. 위와 같은 방법으로 문제를 해결해보시길 추천드립니다.
1 2 3 4 5 6 7 8 9 10
module.exports = { async rewrites() { return [ { source: '/api/auth/callback', destination: '/pages/auth/callback', }, ] }, }
커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!