next.js 프로젝트에서 동적 라우팅을 사용한 경우, localhost에서는 문제가 없었으나
vercel을 통해 배포한 경우 새로고침을 하자 다음과 같은 에러가 나타났다.
GET https://<domain>/project/5/ 404
AS-IS
디렉토리 : /.../[id]/index.tsx
url : https://<domain.>/.../99
TO-BE
디렉토리 : /.../detail/index.tsx
url : https//<domain.>/.../detail?id=99
// pages/.../[id]/index.tsx
export async function getStaticPaths() {
return {
paths: [
{ params: { results: 'result1' } },
{ params: { results: 'result2' } }
],
fallback: false
};
}
결국 pages의 디렉토리를 변경하는 방법을 선택했다.