Remix- und Hydrogen-i18n für Storefronts und routengetriebene Apps
Mit Better I18N halten Sie serverseitig gerenderten Sprachstatus, lokalisierte Storefront-Inhalte und suchrelevante Routen in einem Workflow im Einklang.
Get started in 3 steps
Install the app-side SDK
Verwenden Sie das Provider-basierte SDK in Ihrer Remix- oder Hydrogen-App, damit übersetzte Inhalte über Routenmodule hinweg geteilt werden können.
npm install @better-i18n/use-intl use-intlSprache auf dem Server auflösen
Lesen Sie die Sprache aus dem Request, den Routenparametern oder dem Storefront-Kontext und übergeben Sie sie an das Root Ihrer App.
export async function loader({ request }: LoaderFunctionArgs) {
const locale = resolveLocaleFromRequest(request);
return json({ locale });
}Provider in der Root-Route hydrieren
Geben Sie die Sprache einmal an, damit verschachtelte Routen, Produktseiten und die Warenkorb-UI dieselbe Übersetzungsquelle nutzen.
export default function App() {
const { locale } = useLoaderData<typeof loader>();
return (
<BetterI18nProvider project="your-org/your-storefront" locale={locale}>
<Outlet />
</BetterI18nProvider>
);
}Warum Better I18N mit Remix und Hydrogen einsetzen?
Route-level locale wiring
Ein Provider-basiertes Setup, das zu loader-getriebenen Frameworks und Storefront-Routenbäumen passt.
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
Lokalisierte Storefronts ausliefern, ohne zersplitterte Workflows
Halten Sie serverseitige Sprachauflösung, Produktinhalte und Kaufabsicht-Seiten in einem einzigen Lokalisierungssystem.