Next.js Github Page 배포 과정에서 발생한 api 이슈 질문드립니다.

[넥제러]

안녕하세요. 선생님.
React부터 Next.js까지 선생님 수업으로 많은 도움 받고 있는 학생입니다.

다름이 아니라
제가 만든 Next.js 프로젝트가 로컬에서는 문제 없이 DB 입력 및 출력이 가능했으나
Github Page로 배포하는 과정에서 api 주소를 인식하지 못하는 문제가 발생하였는데
어떠한 이유인지를 파악하지 못하여 질문을 남기게 되었습니다.

1. 폴더 구조는 다음과 같습니다.

2. new.js와 show.js의 코드는 다음과 같습니다. (수식문은 생략)
new.js : 사용자의 입력값을 저장하고 /game/MoleRank 로 이동시키는 api입니다.

show.js : db 값을 가져오는 api입니다.


((지속적인 서버 클라이언트와 mongodb 입출력문의 충돌로 인해
부득이하게 위와 같이 코드를 구상하게 되었습니다. (제 뇌로는 여기까지가 일단 한계...)))

3. new api를 호출하는 코드는 다음과 같습니다. (수식문은 생략)
MoleResult.js : 유저의 입력값을 new api와 POST method를 이용하여 db에 저장하는 코드입니다. 

4. show api를 호출하는 코드는 다음과 같습니다. (수식문은 생략)
MoleRank.js : show api를 이용하여 db 데이터를 가져와서 리스트로 보여주는 코드입니다. (return문은 부터 생략)

5. 발생하는 에러는 아래와 같습니다.

(1) https://{내 ID}.github.io/{레포 이름}/game 링크로 들어가서
(2) MoleResult 컴포넌트에서 이름 점수 코멘트를 입력한 후 버튼을 누르면 (<form action="/api/new" method="POST">)
(3) MoleRank 컴포넌트로 이동하여 (await (await fetch('/api/show')).json();) 점수 리스트를 보여줘야 합니다.

하지만 배포된 사이트 링크에서는 (2) 단계에서 버튼을 누른 후
https://{내 ID}.github.io/{레포 이름}/game/MoleRank 로 이동하지 않고
https://{내 ID}.github.io/api/new 로 이동한 후 405 not allowed 에러가 발생하고 있습니다.
혹시 원인이 무엇인지 추측이 되시나요?

[codingapple]

github pages는 서버기능이용불가능해서 aws나 vercel에 올려야합니다

[넥제러]

안녕하세요. 선생님.
정말 Vercel 쓰니까 5분만에 해결되네요.
긴 질문 글 읽어주셔서 감사합니다.

[글쓴이]

글