피드로 돌아가기
Dev.toFrontend
원문 읽기
분산된 Localhost Fallback 제거로 0%에서 100%로 Google 인덱싱 복구
How I Fixed Canonical URLs Pointing to Localhost in Next.js
AI 요약
Context
Next.js 프로젝트 전반에 걸쳐 process.env.SITE_URL 미설정 시 http://localhost:3000을 반환하는 인라인 Fallback 로직을 13개 파일에 분산 배치한 구조. DB 기반 설정값이 런타임에 로드되기 전, Build 또는 Request 타임의 generateMetadata() 함수가 하드코딩된 Localhost 주소를 Canonical URL로 생성하며 Googlebot의 크롤링 불가 상태 초래.
Technical Solution
- 분산된 인라인 Fallback 로직을 제거하고 단일 진입점인
getPublicSiteUrl()Helper 함수로 중앙 집중화 VERCEL_URL과 같은 환경 변수 대신 실제 Production Domain을 최후순위 Fallback으로 설정하여 잘못된 Canonical URL 생성 원천 차단metadataBase설정을 통한 프레임워크 수준의 Relative URL 해석 보장 및 수동 URL 생성 로직의 정합성 확보process.env.SITE_URL→Production Domain순의 우선순위 결정 로직을 통해 환경별 URL 유연성 및 안정성 동시 확보- 18라인의 코드 수정으로 13개 파일의 중복 로직을 제거하는 DRY(Don't Repeat Yourself) 원칙 적용
실천 포인트
1. `grep -rn "process\.env"` 명령어로 프로젝트 내 분산된 URL Fallback 로직 존재 여부 확인
2. Production HTML 소스 내 `link rel="canonical"` 및 `og:url`에 `localhost` 포함 여부 전수 조사
3. `metadataBase` 설정과 별개로 절대 경로를 생성하는 모든 로직이 중앙 집중화된 Helper 함수를 사용하는지 검토