Remix & Hydrogen i18n
i18n pro Remix a Hydrogen: obchody a aplikace řízené trasami
Použijte Better I18N a udržte v jednom procesu v souladu stav jazyka vykreslený na serveru, lokalizovaný obsah obchodu i trasy viditelné pro vyhledávače.
Setup
Get started in 3 steps
Install the app-side SDK
Použijte SDK založené na provideru ve své aplikaci Remix nebo Hydrogen, aby se přeložený obsah dal sdílet mezi moduly tras.
terminal
npm install @better-i18n/use-intl use-intlUrčete jazyk na serveru
Přečtěte jazyk z požadavku, parametrů trasy nebo kontextu obchodu a předejte ho do rootu aplikace.
app/root.tsx
export async function loader({ request }: LoaderFunctionArgs) {
const locale = resolveLocaleFromRequest(request);
return json({ locale });
}Hydratujte provider v root trase
Poskytněte jazyk jen jednou, aby vnořené trasy, stránky produktů a rozhraní košíku používaly stejný zdroj překladů.
app/root.tsx
export default function App() {
const { locale } = useLoaderData<typeof loader>();
return (
<BetterI18nProvider project="your-org/your-storefront" locale={locale}>
<Outlet />
</BetterI18nProvider>
);
}Capabilities
Proč používat Better I18N s Remixem a Hydrogenem?
Práce s jazykem načítaná na serveru, která se hodí pro loadery Remixu a toky obchodu Hydrogen
Vhodné pro stránky kategorií, produktů a obsahu citlivé na SEO
Jediný překladový proces pro rozhraní obchodu, stránky účtu a marketingové trasy
Podporuje strategie jazyka založené na trasách bez křehkého duplikování souborů
Umožňuje vývojářům nasazovat lokalizované aktualizace obchodu bez čekání na nový deploy
Udržuje srovnávací obsah a obsah s nákupním záměrem v souladu se stránkami lokalizace produktů
Example
Route-level locale wiring
Nastavení založené na provideru, které se hodí pro frameworky postavené na loaderech a stromy tras obchodu.
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
Nasazujte lokalizované obchody bez rozdrobených procesů
Držte serverovou práci s jazykem, produktový obsah a stránky s nákupním záměrem v jednom lokalizačním systému.