Remix- en Hydrogen-i18n voor storefronts en route-gedreven apps
Gebruik Better I18N om servergerenderde taalstatus, gelokaliseerde storefrontcontent en op zoekmachines gerichte routes in één workflow op elkaar afgestemd te houden.
Get started in 3 steps
Install the app-side SDK
Gebruik de provider-gebaseerde SDK in uw Remix- of Hydrogen-app, zodat vertaalde content over routemodules heen gedeeld kan worden.
npm install @better-i18n/use-intl use-intlDe taal op de server bepalen
Lees de taal uit het request, de routeparameters of de storefrontcontext en geef die door aan de root van uw app.
export async function loader({ request }: LoaderFunctionArgs) {
const locale = resolveLocaleFromRequest(request);
return json({ locale });
}De provider hydrateren in de rootroute
Geef de taal één keer mee, zodat geneste routes, productpagina's en de winkelwagen-UI dezelfde vertaalbron gebruiken.
export default function App() {
const { locale } = useLoaderData<typeof loader>();
return (
<BetterI18nProvider project="your-org/your-storefront" locale={locale}>
<Outlet />
</BetterI18nProvider>
);
}Waarom Better I18N gebruiken met Remix en Hydrogen?
Route-level locale wiring
Een provider-gebaseerde opzet die past bij loader-gedreven frameworks en de routestructuren van storefronts.
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
Lever gelokaliseerde storefronts op zonder versnipperde workflows
Houd taalverwerking op de server, productcontent en pagina's met kopersintentie in één localisatiesysteem.