Next.js로 다국어 플랫폼 만들기 — next-intl 실전 가이드

5개 언어를 지원하는 플랫폼을 만든 이야기

DCC Lab의 The Room 프로젝트는 한국어, 영어, 일본어, 베트남어, 중국어 5개 언어를 지원합니다. 이 글에서는 Next.js + next-intl로 다국어 플랫폼을 구축한 실전 경험을 공유합니다.

왜 next-intl인가?

라이브러리App Router서버 컴포넌트타입 안전 |-----------|:----------:|:----------:|:--------:| next-intl✅✅✅ react-i18next⚠️❌⚠️ next-translate❌❌❌

Next.js App Router와 서버 컴포넌트를 완벽 지원하는 건 next-intl뿐입니다.

핵심 설정

1. 미들웨어로 locale 라우팅

/ko/about, /en/about 형태로 URL에 locale이 포함됩니다. 기본 locale은 prefix를 생략할 수도 있습니다.

2. 서버 vs 클라이언트 번역

• 서버 컴포넌트: getTranslations()
• 클라이언트 컴포넌트: useTranslations()

3. 주의사항 (우리가 겪은 실수)

dot notation 미지원: ``tsx // ❌ 잘못됨 const t = useTranslations("a.b");

// ✅ 올바름 const tA = useTranslations("a"); const t = (key: string) => tA(b.${key}); `

ICU MessageFormat: `json // ✅ next-intl은 {variable} 문법 "welcome": "Hello, {nickname}!"

// ❌ Handlebars 문법 아님 "welcome": "Hello, {{nickname}}!" `

SEO 고려사항

• hreflang 태그로 Google에 언어 버전 알리기
• 각 locale별 canonical URL 설정
• sitemap.xml`에 모든 locale 페이지 포함

이런 다국어 플랫폼이 필요하시다면

DCC Lab은 5개 이상의 다국어 프로젝트를 운영 중입니다. 다국어 플랫폼 개발이 필요하시면 문의하세요.