Next.js 배포 후 화면이 다르게 보일 때

Next.js 프로젝트를 배포했는데 로컬에서 보는 화면과 배포된 화면이 다를 때가 있다. 메타데이터, 스타일, 심지어 콘텐츠까지 달라질 수 있다.

빌드 결과 확인하기

Next.js 문제의 원인을 찾으려면 빌드 자체보다 재현 가능한 단서를 남기는 것이 중요하다. canonical 태그나 메타데이터 설정을 먼저 확인해보자.

curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'
npm run build

이 두 명령으로 메타데이터가 제대로 빌드되었는지, 실제 페이지에 반영되었는지 확인할 수 있다.

재현 조건 정하기

Next.js 쪽 문제를 마주칠 때는 바로 수정하기 전에 sitemap이나 RSS부터 확인하면 불필요한 변경을 줄일 수 있다. 작은 확인이 쌓이면 원인 후보가 자연스럽게 줄어든다.

• 먼저 볼 것: 빌드 로그와 sitemap/RSS
• 같이 비교할 것: 정상일 때의 웹 렌더링 상태
• 기록해둘 것: 빌드 로그, 메타데이터, 배포 환경 변수

canonical 태그와 체크 포인트

배포 후 화면이 다를 때는 canonical 태그가 올바르게 설정되었는지 확인해야 한다. 검색 엔진이 잘못된 URL을 캐시했을 수 있기 때문이다.

빌드 로그에서 흔한 착각

Next.js 빌드는 성공했지만 실제 HTML은 다를 수 있다.

1. 같은 조건에서 증상을 재현해본다
2. 로그나 응답에서 바뀐 부분을 한 줄로 정리한다
3. 실제 화면이나 공개 URL까지 확인해서 최종 검증한다

다음을 위해 정리하기

마지막에는 실제 화면이나 공개 URL까지 확인해야 작업이 끝난다. 어떤 메타데이터가 달라졌는지, 언제부터 문제가 생겼는지 기록해두면 다음 확인이 훨씬 빨라진다.