Geliştirmeyi yavaşlatmadan Vite i18n
Hot reload'ı hızlı, çeviri anahtarlarını tipli ve dile göre içeriği hem uygulama hem pazarlama yüzeylerinde kolay yayınlanabilir tutmak için Vite projelerinde Better I18N'i kullanın.
Get started in 3 steps
React ile uyumlu SDK'yı kurun
Çevirilerin standart bileşen ağaçlarında çalışması için çoğu Vite projesinde @better-i18n/use-intl ve use-intl ile başlayın.
npm install @better-i18n/use-intl use-intlWrap your app once
Dil verisinin ilk render'dan önce hazır olması için BetterI18nProvider'ı Vite giriş dosyanıza ekleyin.
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BetterI18nProvider } from '@better-i18n/use-intl';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<BetterI18nProvider project="your-org/your-project" locale="en">
<App />
</BetterI18nProvider>
);Bileşenlerin içinde çeviri yapın
İçerik üzerinde çalışırken Vite hot reload'ını hızlı tutarak anahtarlar ve interpolasyon için tipli hook'ları kullanın.
import { useTranslations } from '@better-i18n/use-intl';
export function Hero() {
const t = useTranslations('landing');
return <h1>{t('headline')}</h1>;
}Better I18N neden Vite ile kullanılır?
Typical Vite setup
Tipli çevirilere ve hızlı iterasyona ihtiyaç duyan Vite uygulamaları için minimal, provider tabanlı bir kurulum.
import { BetterI18nProvider, useTranslations } from '@better-i18n/use-intl';
function LandingHero() {
const t = useTranslations('landing');
return (
<section>
<h1>{t('headline')}</h1>
<p>{t('subheadline')}</p>
</section>
);
}
export default function App() {
return (
<BetterI18nProvider project="your-org/your-project" locale="en">
<LandingHero />
</BetterI18nProvider>
);
}Related guides
Other frameworks
Get started
Yerelleştirilmiş Vite uygulamalarını daha hızlı yayına alın
Geliştirme hızınızı koruyun, çevirileri gerçek bir iş akışına taşıyın ve dil dosyalarını elle düzenlemeden güncelleme yayınlayın.