Next.js 동적 라우트 배포 후 화면이 다르게 보일 때

동적 라우트는 복잡해 보이지만, 실제로 문제를 찾으려면 차근차근 확인해야 한다.

문제의 경계 정하기

동적 라우트 문제가 터졌을 때, 모든 파일이 의심스러워진다. 그래서 먼저 문제가 어디까지 미치는지 경계를 정해야 한다.

• 특정 URL만 깨지나: 아니면 모든 동적 라우트가 깨지나
• 로컬에서는 멀쩡한가: 배포 후만 문제가 되나
• 로그에는 에러가 있나: 아니면 조용히 실패하나

로컬과 배포 환경 비교

배포 환경의 설정과 로컬 설정이 다를 수 있다.

npm run build

응답이 뭔지 확인

UI에 뭐가 보이는지도 중요하지만, 실제 응답 데이터가 뭔지 봐야 한다.

1. 증상이 특정 URL에서만 나는지, 아니면 광범위하게 나는지 파악한다
2. 로그와 응답에서 뭐가 다른지 확인한다
3. 실제 배포 URL에서 제대로 되는지 본다

다음을 위해 기록해 두기

비슷한 증상이 나오면 먼저 현재 상태를 기록하고, 하나씩 비교해 가면 된다.