트러블 슈팅

mvp 개발을 끝내고 중간 발표와 유저 테스트를 위해서 Vercel에 배포를 했다.
그런데 페이지 이동에 문제가 발생했다..
로컬 호스트에서는 마이페이지 또는 상세 페이지와 같은 동적인 페이지에 접근이 문제 없이 됬는데
배포를 하고 배포 링크에서 테스트를 하니까 접속이 안되고 있었다

• url은 바뀌지만 메인 페이지로 이동됨
  url/mypage/1234 마이페이지에 접근하려니 url은 바뀌지만 메인 페이지로 라우트되고 있었다

해결 방법

Next.JS의 경우 동적으로 라우팅되는 페이지는 Vercel.json 파일에 경로를 지정해줘야 한다고 한다

{
  "rewrites": [
    { "source": "/mypage/:id", "destination": "/mypage/[id]" },
    { "source": "/proDetail/:id", "destination": "/proDetail/[id]" },
    { "source": "/insight/:id", "destination": "/insight/[id]" },
    { "source": "/qna/:id", "destination": "/qna/[id]" }
  ]
}

위와 같이 vercel.json에 동적 라우트 페이지들을 추가해주니 배포 환경에서도 정상적으로 접근이 가능해졌다