-
api 링크및 키를 숨길 수 있는 rewrites 를 사용 중인데 npm run build 명령어를 입력하고 npm run start를 실행하면 rewrites로 작성한 경로를 읽지 못해 에러가 발생합니다. 처음에는 sever side render 문제인 줄 알았는데 확인해보니 rewrites로 설정한 경로 문제더군요. 아래에는 코드와 현 상황을 사진으로 남겼습니다. next.config.js
위와 같이 next.config.js에 rewrites를 작성 하였고 디테일 페이지에서 rewrites로 숨긴 링크에서
데이터를 불러 왔습니다.
npm run dev로 개발 모드로 실행하면 에러가 발생하지 않지만
npm run build를 실행하면 에러가 발생합니다.
에러 설명을 보면 데이터를 요청하는 경로 (rewrites로 작성한 경로)를 읽을 수 없다고 합니다.
docs나 여러 글들을 찾아봐도 제가 원하는 해답을 찾기 힘들어서 질문 드립니다.
혹시 프로젝트에서 rewrites를 사용하면 npm run build를 하기 전
이러한 에러를 방지 하기 위해 추가적으로 필요한 설정이 있을까요?
아니면 따로 필요한 설정이 없는 경우라면 제가 잘못 작성한 부분들이 있을까요?
위에 두 사진은 rewrites를 사용하고 npm run build 그리고 npm run start를 했을때 발생하는 에러입니다.
npm run build를 했을때에는 에러가 없이 페이지 생성이 잘 되지만
rewrites를 작성한 곳 입니다.
이렇게 rewrites된 링크를 사용하면 에러가 발생합니다.
여기까지가 rewrites시 발생한 에러이고
밑에는 rewrites를 사용하지 않았을 때 사진입니다.
위의 두 사진은 rewrites를 사용하지 않고 직접 링크를 적어 사용한 코드입니다.
이 코드는 npm run build를 하고 npm run start를 해도 어떠한 에러나 문제가 발생하지 않았습니다.
대체 어떤 원인으로 rewrites를 사용하면 작동이 안되는지 모르겠습니다.말씀해주신 방안으로 sever side는 해결 됐는데 ssg나 isr로 구현을 할때는 여전히 npm run build과정에서 에러가 발생합니다.
getStaticProps함수를 사용해봤는데 위와 같이 작성하였고 npm run build를 실행하니
아래와 같은 에러가 발생 했습니다.
에러를 확인해보니 말씀해주신 127.0.0.1:3000이라는 경로를
getStaticProps로 작성하면 읽지 못해서 발생하는 문제 같습니다.
getServerSideProps에서는 문제 없이 동작하는데 getStaticProps로 작성하면 에러가 발생하는 이유와
에러를 해결할 수 있는 해결 방안이 궁금합니다... ㅠㅠ
제공해주신 docs는 읽어 봤습니다.
하지만 위처럼 rewrites를 사용하지 않고 npm run build 명령어를 입력하면 문제 없이 잘 동작합니다.
docs에서 존재하는 문제를 해결하기 위해 isr의 revalidate가 있는 게 아닌가 싶기도 하더군요...
그렇다면 rewrites를 사용하지 않고 직접 경로를 입력해서 문제가 없다면 단순히 rewrites를 다른 식으로
시용해야 하는 것이 아닌가? 라는 생각이 들더군요.
제가 말씀 드린대로 rewrites를 다른 식으로 사용 해야 한다면 어떤 식으로 사용 해야 하는지
그리고 위처럼 작성하는 게 올바르지 않고 next-js에서 권고되지 않는 방식이라면 getStaticProps안에서는
get요청을 포함한 post,delete...등등 rest api를 통한 ajax요청을 하면 안되는지(혹은 getServerSideProps 안에서만 ajax요청이 가능한지)가
궁금합니다...
- 답변은 로그인 후 가능합니다.