App Router i18n

번역 리소스는 서버에서 확정하고 클라이언트에는 필요한 상태만 넘긴다

App Router의 다국어 페이지는 [locale] 세그먼트에서 언어를 결정한 뒤 서버 컴포넌트에서 번역 리소스를 읽는다. 상호작용이 필요한 부분만 클라이언트 컴포넌트로 분리한다.

1

Locale Segment

app/[locale]

URL 세그먼트가 현재 언어와 fallback 판단의 기준이 된다.

2

Server Load

getTranslation()

서버에서 namespace를 로드하고 t 함수를 만든다.

3

Server Component

t('home:title')

초기 HTML에 번역된 제목과 본문을 포함해 렌더링한다.

4

Client Island

'use client'

언어 선택, 탭, 폼처럼 상태가 필요한 UI만 클라이언트에 둔다.

5

Metadata

alternates.languages

canonical과 hreflang을 같은 locale 규칙으로 생성한다.

서버 책임

번역 리소스와 SEO는 서버에서 결정한다

preload 지원 locale 목록
namespace common, home
metadata canonical, hreflang
클라이언트 책임

상호작용 상태만 hydration 영역으로 넘긴다

locale switch 링크 또는 router 이동
form state 입력값과 검증 메시지
UI state 탭, 모달, 선택 상태