피드로 돌아가기
Dev.toFrontend
원문 읽기
Sanity CMS와 next-intl 기반의 다국어 라우팅 최적화 설계
How I wire Sanity CMS multilingual content to Next.js with next-intl
AI 요약
Context
Sanity CMS의 콘텐츠 저장 방식과 next-intl의 라우팅 체계 간의 유기적 연결 부재로 인한 통합 복잡성 발생. 단순 도구 조합만으로는 Locale별 Slug 유일성 검증 및 SEO를 위한 hreflang 메타데이터 동적 생성이 어려움.
Technical Solution
- @sanity/document-internationalization 플러그인을 통한 Locale별 개별 문서 생성 및 Shared _id prefix 기반의 문서 관리 구조 채택
- GROQ 쿼리에 $locale 파라미터를 명시하여 요청된 언어에 최적화된 콘텐츠만 필터링하는 데이터 추출 전략 수립
- Custom isUnique 함수를 구현하여 글로벌 기준이 아닌 언어별 Scope 내에서의 Slug 유일성 검증 로직 적용
- translation.metadata 참조 쿼리를 통해 모든 언어 변체(Variants)의 Slug를 수집하고 Next.js의 alternates.languages 객체에 매핑하여 SEO 최적화
- generateStaticParams 내에서 전체 Locale 리스트를 순회하며 정적 경로를 사전 생성하여 SSR로 인한 성능 저하 방지
- 콘텐츠 부재 시 notFound() 호출을 통한 404 처리로 Thin-content 인덱싱 방지 및 검색 엔진 최적화 수행
실천 포인트
1. 다국어 Slug 설계 시 글로벌 유일성이 아닌 언어별 유일성(Language-scoped uniqueness) 검증 로직인지 확인
2. Next.js App Router 사용 시 generateStaticParams에서 모든 Locale-Slug 조합을 생성하여 Static Fallback 성능 보장 여부 검토
3. SEO를 위해 translation.metadata를 활용한 hreflang 링크의 동적 생성 로직 구현 권장
4. 번역되지 않은 페이지에 대한 처리 전략(404 vs Default Locale Redirect)을 정의하고 일관되게 적용