Next.js Redirect 문제 해결방법에 대한 영상을 찍었다.
처음 찍어봐서 긴장됐지만 영상을 만들며 더 자세히 해당 문제에 대해 이해하게 되었고 다음에는 마주쳐도 금방 해결할 수 있다!!
유튜브에서 보기
문제 상황
배포 후 리다이렉트를 했을 때, 모든 페이지에서 인덱스 페이지로 리다이렉트가 되는 문제가 있었습니다.서비스의 모든 페이지에서 새로고침을 누를경우, 해당 페이지로 다시 로드가 되어야 하는데, 자꾸 첫 메인 화면으로 로딩되는 문제가 있었습니다.
이는 저희 서비스에서 와인 취향 테스트를 이후 혹은 와인 검색 필터링 기능을 하고나서, 카카오 페이를 하고나서 등의 다양한 상황에서 해당 작업이 완료되면 리다이렉트를 시켜주는 로직들이 많았기에 해당 코드에 대한 수정이 필요하였습니다. 해당 문제는 로컬 개발 환경에서는 마주하지 못했던 문제라서 배포 후에야 문제를 인식하게 되었습니다.
문제의 원인
Next js 의 빌드 방법이었습니다. next js는 초기 html 의 렌더링을 서버가 담당합니다. 브라우저에서 사용자가 원하는 페이지 요청을 보내면, 서버는 빌드 시점에 생성된 정적 파일들을 보내주고, 그 이후에 html이 동적으로 작동하기 위한 js파일을 다운로드 받습니다.
결과적으로 빌드시점에 생성된 .html 파일들이 그대로 배포되어 제공되기 때문에, 일반적인 npm run build & export 방식으로 빌드만 하게 되면 아까 보신 문제 상황과 같은 오류가 발생하게 됩니다.
해결방법
- next.config.js 파일에서 export path map을 추가해주는 방식이 있습니다.
Export path map은 빌드시, 페이지 대상에 대한 요청 경로 매핑을 지정할 수 있는 일종의 환경변수입니다. export path map 에서 /test/*** 페이지로 접근할시 모든 요청을 /test로 보내준다는 경로 설정을 해주면 됩니다. /test 뒤에 오는 모든 요청은 기본적으로 /test 로 보내지게 되므로 저희가 마주한 리다이렉트 문제를 해결 할 수 있게 됩니다.
- 혹은 리다이렉트 주소를 .html을 붙인 주소로 직접 작성해주어도 해당 에러를 fix할 수 있습니다. 실제로 저희 프로젝트에서는 간단하게 이 문제를 해결하기 위해 이 방법을 사용하였는데요. window.location.replace("/test.html)을 하면 직접 초기 렌더링에 쓰이는 html 파일에 접근할 수 있기 때문에 문제를 해결 할 수 있습니다.
느낀점
저는 이 리다이렉트 문제를 배포할 때 마주치게 되어 문제해결에 정말 많은 시간이 소요되었습니다. 이번 글을 통해 next js의 빌드과정에서 같은 에러를 마주하게 되는 분들께 조금이나마 도움이 되었길 바랍니다.
