i18n con Vite senza rallentare lo sviluppo
Usa Better I18N nei progetti Vite per mantenere rapido l'hot reload, tipizzate le chiavi di traduzione e facili da pubblicare i contenuti per lingua, sia nell'app sia nelle pagine di marketing.
Get started in 3 steps
Installa l'SDK compatibile con React
Per la maggior parte dei progetti Vite, parti da @better-i18n/use-intl e use-intl, così le traduzioni funzionano negli alberi di componenti standard.
npm install @better-i18n/use-intl use-intlWrap your app once
Monta BetterI18nProvider nel file di ingresso di Vite, così i dati di lingua sono disponibili prima del primo render.
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>
);Traduci dentro i componenti
Usa hook tipizzati per chiavi e interpolazione, mantenendo rapido l'hot reload di Vite mentre iteri sui contenuti.
import { useTranslations } from '@better-i18n/use-intl';
export function Hero() {
const t = useTranslations('landing');
return <h1>{t('headline')}</h1>;
}Perché usare Better I18N con Vite?
Typical Vite setup
Una configurazione minima basata su provider per app Vite che hanno bisogno di traduzioni tipizzate e iterazione rapida.
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
Pubblica più in fretta app Vite localizzate
Mantieni la tua velocità di sviluppo, porta le traduzioni in un flusso di lavoro reale e pubblica aggiornamenti senza modificare a mano i file di lingua.