Better I18N이 스타터에 대해서
이것은 다언어 애플리케이션을 구축하기 위해 Next.js App Router와 함께 better-i18n을 사용하는 방법을 보여주는 시작용 템플릿입니다.
기술 스택
Next.js 15
App Router + Server Components
@better-i18n/next
CDN 기반 번역
next-intl
타입 안전 번역 훅
Tailwind CSS 4
유틸리티 우선 스타일링
TypeScript 5
완전한 타입 안전성
CDN 번역 아키텍처
자세히 보기better-i18n은 CDN 우선 아키텍처를 사용합니다. 대시보드에서 번역을 게시하면 전 세계 50ms 미만의 전송을 제공하는 Cloudflare 글로벌 엣지 네트워크에 배포됩니다.
대시보드 게시
번역은 better-i18n 대시보드에서 Cloudflare R2 스토리지로 게시됩니다.
엣지 CDN 전송
번역 번들은 전 세계 엣지 위치에서 50ms 미만의 로딩 시간으로 제공됩니다.
서버 사이드 렌더링
Next.js 서버 컴포넌트는 getMessages()를 통해 요청 시 번역을 가져와 SEO 친화적인 HTML을 생성합니다.
클라이언트 하이드레이션
BetterI18nProvider는 레이아웃 이동 없이 클라이언트 측에서 번역을 하이드레이션합니다. useSetLocale()로 즉시 전환이 가능합니다.
SDK는 기본적으로 매니페스트 데이터를 5분간, 번역 메시지를 30초간 캐시합니다. 캐시 무효화는 게시 시 자동으로 이루어집니다.
이 스타터에서 사용된 SDK API
전체 API 레퍼런스| API | 유형 | 용도 |
|---|---|---|
createI18n() | Config | 프로젝트 설정으로 SDK 초기화 |
i18n.betterMiddleware() | Server | URL, 쿠키, Accept-Language에서 로케일 감지 |
i18n.getMessages(locale) | Server | 로케일의 모든 번역 불러오기 |
i18n.getLocales() | Server | CDN에서 사용 가능한 로케일 가져오기 |
BetterI18nProvider | Client | 번역을 위한 React 컨텍스트 |
useTranslations(ns) | Client | 타입 안전 번역 접근 |
useSetLocale() | Client | 즉시 언어 전환 |
useManifestLanguages() | Client | CDN에서 동적 언어 감지 |
작동 방식
번역은 better-i18n 대시보드에서 관리되고 CDN을 통해 제공됩니다. 미들웨어는 URL, 쿠키 또는 브라우저 언어에서 사용자의 로케일을 감지합니다. 메시지는 서버 측에서 로드되어 클라이언트 컴포넌트용 BetterI18nProvider에 전달됩니다.
사용 가능한 로케일
이 로케일은 서버 측 API i18n.getLocales()를 사용하여 빌드 시에 CDN에서 가져옵니다.
로케일 관리는 better-i18n 대시보드.