[Next.js] 배포 후 동적 라우팅 새로고침 404 에러

hapwoo·2022년 8월 3일
0

React

목록 보기
2/2

next.js 프로젝트에서 동적 라우팅을 사용한 경우, localhost에서는 문제가 없었으나
vercel을 통해 배포한 경우 새로고침을 하자 다음과 같은 에러가 나타났다.

GET https://<domain>/project/5/ 404

원인

해결 방안

첫번째 해결 방안

1. 다음과 같이 디렉토리를 변경

  • AS-IS
    디렉토리 : /.../[id]/index.tsx
    url : https://<domain.>/.../99

  • TO-BE
    디렉토리 : /.../detail/index.tsx
    url : https//<domain.>/.../detail?id=99

다른 해결 방안

2. 동적 라우팅을 하는 페이지에 추가

// pages/.../[id]/index.tsx


export async function getStaticPaths() {
    return {
        paths: [
            { params: { results: 'result1' } },
            { params: { results: 'result2' } }
        ],
        fallback: false
  };
}

결론

결국 pages의 디렉토리를 변경하는 방법을 선택했다.

profile
프론트 개발자

0개의 댓글