간단한 React i18n
Hooks, Context, 매끄러운 CDN 제공을 갖춘 React 애플리케이션용 타입 안전 국제화.
Get started in 3 steps
Install
Add @better-i18n/use-intl and use-intl to your project.
npm install @better-i18n/use-intl use-intl
Wrap 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>;
}기능
Installation & Setup
Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.
# 1. Install
npm install @better-i18n/use-intl
# 2. Wrap your app
import { BetterI18nProvider } from '@better-i18n/use-intl'
function App() {
return (
<BetterI18nProvider project="org/project" locale="en">
<YourApp />
</BetterI18nProvider>
)
}
# 3. Use translations
import { useTranslations } from '@better-i18n/use-intl'
function MyComponent() {
const t = useTranslations('common')
return <h1>{t('welcome')}</h1>
}인기 React i18n 라이브러리와 함께 사용
Better i18n은 즐겨 쓰는 i18n 라이브러리를 대체하는 제품이 아닙니다. 오히려 번역 관리를 담당하는 레이어로서, 기존 라이브러리를 더 강력하게 만들어 줍니다.
Better i18n + react-intl
ICU 메시지 형식을 지원하는 가장 인기 있는 React i18n 라이브러리입니다. 수천 개의 프로덕션 앱에서 사용됩니다.
Better i18n은 번역을 react-intl JSON 형식으로 직접 동기화합니다. 대시보드에서 편집하고 앱에서 즉시 변경 사항을 확인하세요.
Better i18n + react-i18next
i18next를 기반으로 한 React용 강력한 i18n 프레임워크입니다. 네임스페이스, 보간, 복수형 같은 기능을 기본으로 제공합니다.
네임스페이스를 포함한 i18next 호환 JSON으로 내보내세요. Better i18n이 번역 워크플로를 처리하고, i18next가 런타임을 담당합니다.
Better i18n + FormatJS
react-intl을 포함한 국제화 라이브러리 모음입니다. ICU 메시지 문법과 CLDR 데이터를 지원합니다.
Better i18n은 ICU 메시지 형식을 기본으로 지원합니다. 복잡한 복수형과 select를 시각적으로 관리하고, FormatJS 형식으로 내보낼 수 있습니다.
Better i18n + Lingui
가독성이 높고 자동화되어 있으며 최적화된 i18n 라이브러리입니다. 매크로 기반 메시지 추출로 뛰어난 개발 경험(DX)을 제공합니다.
Lingui CLI로 메시지를 추출하고, Better i18n에서 번역을 관리한 뒤 GitHub 통합을 통해 자동으로 다시 동기화하세요.
빠른 시작
몇 분 만에 React 앱에서 Better i18n을 시작하세요.
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>
);
}Related Articles
2026년 최고의 AI 번역 도구: 개발자 가이드
2026년 최고의 AI 번역 도구: 개발자 가이드 2026년 개발자를 위한 최고의 AI 번역 도구는 DeepL API, Google Cloud Translation, Amazon Translate, Azure Translator, 그리고 better-i18n입니다. 각각...
Read more →Django i18n mit KI-Übersetzung: Vollständige Einrichtungsanleitung
Django i18n mit KI-Übersetzung: Vollständige Einrichtungsanleitung Django wird mit einem ausgereiften Internationalisierungs-Framework (i18n) geliefert,...
Read more →개발자 경험 심층 분석: Better i18n 플랫폼 UX가 현지화를 빠르고 직관적으로 만드는 방법
현지화 플랫폼은 투박한 인터페이스, 느린 편집기, 위원회에서 설계한 것 같은 워크플로우로 악명이 높습니다. 우리는 다른 철학으로 Better i18n을 구축했습니다: 모든 상호작용이 의도적이고, 빠르며, 개발자의 시간을 존중해야 합니다. 이 글은 Better i18n을 다르게...
Read more →