Next.js
Next.js 서버 액션을 사용한 글 상세 페이지에서 메타데이터가 안 먹힐 때
로컬에서는 정상이던 메타데이터가 배포 환경에서 제대로 생성되지 않는다면, 서버 액션과 메타데이터 생성 시점을 확인해야 한다.
서버 액션으로 동적 글을 불러오는 페이지는 메타데이터 생성이 조금 다르다. 로컬에서는 괜찮았던 설정도 배포 환경에서는 다르게 보일 수 있다.
핵심은 웹 렌더링 전체 흐름을 이해하고, 메타데이터가 정말 생성되는지 확인하는 것이다. 로그, 응답, 설정 중 하나를 증거로 잡아야 한다.
빌드 시점과 런타임의 차이
Next.js에서 메타데이터는 두 가지 방식으로 생성된다. 빌드 시점에 생성되는 정적 메타데이터와, 런타임에 생성되는 동적 메타데이터다.
서버 액션으로 글을 불러올 때는 런타임 메타데이터가 필요하다.
curl -s https://example.com/posts/123 | grep -Ei 'title|description|canonical|og:|twitter:'
npm run build
HTML head에 제목, 설명, Open Graph 태그가 들어가 있나 확인한다.
메타데이터 생성 순서 확인
서버 액션에서 글 데이터를 받아온 후, 메타데이터를 생성해야 한다. 이 순서가 맞지 않으면 메타데이터가 비어있을 수 있다.
- 먼저 볼 것: HTML head와 빌드 로그
- 비교할 것: 정상일 때의 메타데이터
- 기록할 것: 명령어, 응답 상태, 수정한 설정
환경변수와 URL 확인
동적 글 페이지의 canonical URL이 정확한가. 기본 도메인이 환경변수로 설정되어 있나.
배포 환경에서 기본 도메인이 다르면 canonical URL이 잘못될 수 있다.
캐싱 확인
배포 후 브라우저 캐시나 CDN 캐시 때문에 이전 버전이 보일 수도 있다. 하드 새로고침이나 시크릿 창에서 확인한다.
검증
- 페이지를 방문했을 때 메타데이터가 HTML에 들어가 있나 확인한다.
- 빌드 로그에 오류가 있는지 확인한다.
- 검색 엔진 미리보기 도구로 최종 확인한다.
이번 확인을 기록해두면 다음에 비슷한 증상이 나올 때 빠르게 대응할 수 있다.