[Troubleshooting] Next.js에서 dynamic routing 새로고침 에러
Web Frontend Developer

[Troubleshooting] Next.js에서 dynamic routing 새로고침 에러

회사에서 Next.js 프로젝트를 개발하다가 이슈를 만났다.

/pages/some...path/[id]/index.tsx 이런 식으로 컴포넌트를 만들었고 이 페이지 url은 id=123인 경우 https://domain..name/some...path/123 이렇게 된다. 라우터 훅을 사용해서 router.push('/some...path/123') 이렇게 처리를 하면 동적 라우팅(dynamic routing) 처리가 되어 문제 없이 해당 페이지로 페이지가 이동한다.

문제는 이 페이지에서 새로고침(refresh)을 할 경우이다. 분명히 컴포넌트가 있는데 새로고침을 하면 403 에러가 뜨면서 접근을 할 수가 없다고 나오는 것이 아닌가?

분명히 페이지는 처음에 잘 나타났는데, 이후에 새로고침을 하면 페이지가 에러가 나는 것이 이해가 잘 되지 않았다.

배포의 경우는 AWS S3에 정적 빌드 파일을 저장해서 AWS cloudfront로 연결해서 가져오는 방식이었다.

디버깅을 여러차례 한 끝에 새로 고침을 한 경우 router.pathname 값이 /some...path/[id] 이렇게 나타나고 있음을 알게 되었다. 그래서 S3 버킷이 /some..path/[id] 라는 이름으로 만들어진 것이었다. 그래서 당연히 /some...path/123 이라는 이름의 버킷이 없고 그래서 400번대 에러가 나타난 것으로 발견이 되었다.

이 이슈는 다음과 같이 해결하였다.

AS-IS

TO-BE

  • 디렉토리 : /some...path/detail/index.tsx
  • url : https//domain...name/some...path/detail?id=123
  const router = useRouter();
  const [hospitalId, setHospitalId] = useState<string>('');
  useEffect(() => {
    const { hospitalId } = router.query;
    if (hospitalId) setHospitalId(hospitalId as string);
  }, [router.query]);

이렇게 뒤에 쿼리 파라미터로 id값을 넣어주고 이 값을 /some...path/detail path에 도달했을 때 가져와서 사용하는 식으로 수정해 주었고 문제를 해결했다. 동적 라우팅을 쓸 때 다시 한 번 제대로 알고 써야 함을 깨닫는다.