i18n Remix et Hydrogen pour les boutiques et les applications pilotées par les routes
Utilisez Better I18N pour garder alignés dans un seul workflow l'état de la langue rendu côté serveur, le contenu localisé de la boutique et les routes exposées aux moteurs de recherche.
Get started in 3 steps
Install the app-side SDK
Utilisez le SDK basé sur un provider dans votre application Remix ou Hydrogen, pour que le contenu traduit soit partagé entre les modules de route.
npm install @better-i18n/use-intl use-intlRésoudre la langue côté serveur
Lisez la langue depuis la requête, les paramètres de route ou le contexte de la boutique, puis transmettez-la à la racine de votre application.
export async function loader({ request }: LoaderFunctionArgs) {
const locale = resolveLocaleFromRequest(request);
return json({ locale });
}Hydrater le provider dans la route racine
Fournissez la langue une seule fois, pour que les routes imbriquées, les pages produit et l'interface du panier partagent la même source de traductions.
export default function App() {
const { locale } = useLoaderData<typeof loader>();
return (
<BetterI18nProvider project="your-org/your-storefront" locale={locale}>
<Outlet />
</BetterI18nProvider>
);
}Pourquoi utiliser Better I18N avec Remix et Hydrogen ?
Route-level locale wiring
Une configuration basée sur un provider, adaptée aux frameworks pilotés par les loaders et aux arborescences de routes de boutique.
import { BetterI18nProvider, useTranslations } from '@better-i18n/use-intl';
export async function loader({ request }: LoaderFunctionArgs) {
return json({
locale: resolveLocaleFromRequest(request),
});
}
function ProductHero() {
const t = useTranslations('product');
return <h1>{t('title')}</h1>;
}
export default function App() {
const { locale } = useLoaderData<typeof loader>();
return (
<BetterI18nProvider project="your-org/your-storefront" locale={locale}>
<ProductHero />
<Outlet />
</BetterI18nProvider>
);
}Related guides
Other frameworks
Get started
Livrez des boutiques localisées sans workflows fragmentés
Regroupez la gestion de la langue côté serveur, le contenu produit et les pages d'intention d'achat dans un seul système de localisation.