Next.js Route Handler에서 메타데이터를 다루는 디버깅 흐름

이럴 때는 화면 하나만 보지 말고 로그와 응답을 같이 봐야 한다. 웹 렌더링 전체 흐름에서 원인을 좁혀야 한다.

문제의 경계 파악

Next.js Route Handler 문제를 진단할 때는 재현 가능한 단서를 남기는 게 중요하다. HTML head 태그를 확인하면 다음으로 볼 범위가 확 줄어든다.

먼저 볼 값: 메타데이터

• title, description 태그
• canonical URL
• Open Graph 태그
• Twitter Card 태그

로컬과 운영 비교

정상 상태를 먼저 정해두는 게 좋다. 그래야 메타데이터 결과가 맞는지 아닌지를 빠르게 판단할 수 있다.

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

같이 비교할 값:

• 정상일 때의 웹 렌더링 상태
• 빌드 타임 메타데이터
• 런타임 메타데이터
• 남겨둘 기록: 명령 출력, 응답 코드, 수정한 설정

canonical 확인

웹 렌더링 작업은 로컬과 운영의 차이가 자주 숨어 있다. canonical이 제대로 설정되었는지는 SEO에 직결된다.

응답 확인과 빌드 로그

웹 렌더링 작업에서 정상 상태를 먼저 정해두는 게 좋다. 공개 URL 결과가 맞는지 아닌지를 빠르게 판단할 수 있다.

검증 단계

1. 원래 증상이 같은 조건에서 다시 나는지 확인한다.
2. 로그나 응답에서 바뀐 부분을 한 줄로 설명한다.
3. 공개 화면, 빌드 결과, 실제 요청 중 하나로 마지막 확인을 한다.

다음에 비슷한 증상이 나오면 먼저 현재 값을 기록하고, 하나씩 비교하면 된다. 관련 기록을 짧게라도 남겨두면 다음 확인이 훨씬 빨라진다.