TanStack Start i18n
TanStack Start i18n — 풀스택 현지화
SSR 지원, 자동 로케일 감지, 클라이언트와 서버 양쪽에서 동작하는 타입 안전 번역으로 TanStack Start 앱에 국제화를 추가하세요.
Setup
Set up in 4 steps
Install packages
@better-i18n/use-intl과 use-intl을 설치하세요. 추가 빌드 플러그인이나 Babel 변환은 필요하지 않습니다.
terminal
npm install @better-i18n/use-intl use-intlLoad messages server-side
첫 서버 렌더링에서 바로 사용할 수 있도록 루트 loader에서 번역을 가져오세요. 클라이언트에서 별도로 API를 호출하지 않습니다.
app/routes/__root.tsx
// app/routes/__root.tsx
import { getMessages } from '@better-i18n/use-intl/server';
export const Route = createRootRoute({
loader: async ({ context }) => {
const messages = await getMessages({
projectId: 'your-org/your-project',
locale: context.locale ?? 'en',
});
return { messages, locale: context.locale ?? 'en' };
},
});BetterI18nProvider로 감싸기
loader 데이터를 BetterI18nProvider에 전달하세요. provider는 서버에서 불러온 것과 동일한 메시지로 클라이언트를 하이드레이션합니다.
app/routes/__root.tsx
// app/routes/__root.tsx (continued)
import { BetterI18nProvider } from '@better-i18n/use-intl';
export function RootComponent() {
const { messages, locale } = Route.useLoaderData();
return (
<BetterI18nProvider
messages={messages}
locale={locale}
project="your-org/your-project"
>
<Outlet />
</BetterI18nProvider>
);
}Use in routes
모든 라우트 컴포넌트에서 useTranslations()를 호출하세요. 같은 훅이 클라이언트 컴포넌트와 서버 컴포넌트에서 모두 동작합니다.
app/routes/about.tsx
// app/routes/about.tsx
import { useTranslations } from '@better-i18n/use-intl';
export default function AboutPage() {
const t = useTranslations('pages');
return (
<main>
<h1>{t('about.title')}</h1>
<p>{t('about.description')}</p>
</main>
);
}Capabilities
TanStack Start에서 Better I18N을 사용하는 이유
SSR 하이드레이션 — 서버에서 불러온 메시지가 다시 요청하지 않고 클라이언트를 하이드레이션합니다
콘텐츠 깜빡임 없음 — 첫 렌더링부터 번역된 콘텐츠
동적 로케일 — 언어 목록을 CDN manifest에서 가져오며 하드코딩이 없습니다
경로 기반 라우팅 — /tr/about, /de/about 형태의 URL 구조
풀스택 타입 안전성 — loader와 컴포넌트가 같은 타입 시스템을 공유합니다
쿠키와 헤더 감지 — URL → 쿠키 → Accept-Language 폴백 체인
Other frameworks
Get started
다국어 TanStack Start 앱 만들기
AI 기반 제안, 문맥을 반영한 번역, CDN 전송을 갖춘 하나의 대시보드에서 모든 번역을 관리하세요.