간단한 React i18n
Hooks, Context, 매끄러운 CDN 제공을 갖춘 React 애플리케이션용 타입 안전 국제화.
Setup
Installation & Setup
Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.
Install
Add @better-i18n/use-intl and use-intl to your project.
npm install @better-i18n/use-intl use-intlWrap your app with BetterI18nProvider
Place the provider at the root of your component tree. It fetches messages from the CDN and makes them available via hooks.
import { BetterI18nProvider } from '@better-i18n/use-intl';
function App() {
return (
<BetterI18nProvider project="your-org/your-project" locale="en">
<YourApp />
</BetterI18nProvider>
);
}Use translations
Call useTranslations() in any component to access your translation keys with full TypeScript support.
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return <h1>{t('welcome')}</h1>;
}Capabilities
기능
몇 분 만에 React 앱에서 Better I18N을 시작하세요.
React Hooks API(useTranslations)
자동 완성을 포함한 완전한 TypeScript 지원
최적의 번들 크기를 위한 지연 로딩
복수형을 지원하는 ICU 메시지 형식
변수 보간 및 포맷팅
로케일 관리를 위한 React Context
SSR 및 SSG 지원
개발 중 핫 리로드
DevTools 통합
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return (
<div>
<h1>{t('welcome')}</h1>
<p>{t('greeting', { name: 'World' })}</p>
</div>
);
}Provider fetches from the CDN once
Every component reads from context
60s in-memory cache, offline fallback
Keys typed from your project
Ecosystem
인기 React i18n 라이브러리와 함께 사용
Better I18N은 즐겨 쓰는 i18n 라이브러리를 대체하는 제품이 아닙니다. 오히려 번역 관리를 담당하는 레이어로서, 기존 라이브러리를 더 강력하게 만들어 줍니다.
react-intl
ICU 메시지 형식을 지원하는 가장 인기 있는 React i18n 라이브러리입니다. 수천 개의 프로덕션 앱에서 사용됩니다.
Better I18N은 번역을 react-intl JSON 형식으로 직접 동기화합니다. 대시보드에서 편집하고 앱에서 즉시 변경 사항을 확인하세요.
react-i18next
i18next를 기반으로 한 React용 강력한 i18n 프레임워크입니다. 네임스페이스, 보간, 복수형 같은 기능을 기본으로 제공합니다.
네임스페이스를 포함한 i18next 호환 JSON으로 내보내세요. Better I18N이 번역 워크플로를 처리하고, i18next가 런타임을 담당합니다.
FormatJS
react-intl을 포함한 국제화 라이브러리 모음입니다. ICU 메시지 문법과 CLDR 데이터를 지원합니다.
Better I18N은 ICU 메시지 형식을 기본으로 지원합니다. 복잡한 복수형과 select를 시각적으로 관리하고, FormatJS 형식으로 내보낼 수 있습니다.
Lingui
가독성이 높고 자동화되어 있으며 최적화된 i18n 라이브러리입니다. 매크로 기반 메시지 추출로 뛰어난 개발 경험(DX)을 제공합니다.
Lingui CLI로 메시지를 추출하고, Better I18N에서 번역을 관리한 뒤 GitHub 통합을 통해 자동으로 다시 동기화하세요.
Keep reading
관련
Related Articles
How to Add i18n to Shopify Hydrogen (Complete Guide)
Shopify Hydrogen is the modern way to build custom storefronts — but adding internationalization (i18n) can be challenging. You need locale-aware routing,...
Read More →Django i18n with AI Translation: Complete Setup Guide
Django i18n with AI Translation: Complete Setup Guide Django ships with a mature internationalization (i18n) framework built on GNU gettext. When you...
Read More →Introducing the Better i18n CLI: Manage Translations from Your Terminal
Until now, managing translation keys on Better i18n meant using the dashboard UI or connecting an MCP server to your AI assistant. Both work great — but...
Read More →다른 프레임워크용 i18n 살펴보기
“CDN 게시 기능이 정말 놀라워요. 번역을 푸시하면 즉시 라이브로 반영됩니다 — 배포도, 캐시 무효화도 필요 없어요.”
Samet Selcuk
창업자, Hellospace