i18n en TanStack Start — localización full-stack
Añada internacionalización a su app de TanStack Start con soporte de SSR, detección automática de idioma y traducciones con tipos seguros que funcionan tanto en el cliente como en el servidor.
Set up in 4 steps
Install packages
Instale @better-i18n/use-intl y use-intl. No hacen falta plugins de build adicionales ni transformaciones de Babel.
npm install @better-i18n/use-intl use-intlLoad messages server-side
Cargue las traducciones en el loader raíz para que estén disponibles en el primer render del servidor. Sin una llamada aparte a la API desde el cliente.
// 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' };
},
});Envuelva con BetterI18nProvider
Pase los datos del loader a BetterI18nProvider. El proveedor hidrata el cliente con los mismos mensajes cargados en el servidor.
// 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
Llame a useTranslations() en cualquier componente de ruta. El mismo hook funciona en componentes de cliente y de servidor.
// 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>
);
}¿Por qué usar Better I18N con TanStack Start?
Other frameworks
Get started
Cree una app multilingüe con TanStack Start
Gestione todas sus traducciones en un único panel con sugerencias impulsadas por IA, traducciones sensibles al contexto y entrega por CDN.