i18n con Remix y Hydrogen para tiendas y apps guiadas por rutas
Utilice Better I18N para mantener alineados en un solo flujo de trabajo el estado del idioma renderizado en el servidor, el contenido localizado de la tienda y las rutas orientadas a buscadores.
Get started in 3 steps
Install the app-side SDK
Utilice el SDK basado en proveedor en su app de Remix o Hydrogen para que el contenido traducido se pueda compartir entre módulos de ruta.
npm install @better-i18n/use-intl use-intlResuelva el idioma en el servidor
Lea el idioma desde la petición, los parámetros de ruta o el contexto de la tienda y páselo a la raíz de su app.
export async function loader({ request }: LoaderFunctionArgs) {
const locale = resolveLocaleFromRequest(request);
return json({ locale });
}Hidrate el proveedor en la ruta raíz
Proporcione el idioma una sola vez para que las rutas anidadas, las páginas de producto y la interfaz del carrito compartan la misma fuente de traducciones.
export default function App() {
const { locale } = useLoaderData<typeof loader>();
return (
<BetterI18nProvider project="your-org/your-storefront" locale={locale}>
<Outlet />
</BetterI18nProvider>
);
}¿Por qué usar Better I18N con Remix y Hydrogen?
Route-level locale wiring
Una configuración basada en proveedor que encaja con frameworks guiados por loaders y árboles de rutas de tienda.
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
Publica tiendas localizadas sin flujos de trabajo fragmentados
Mantenga la gestión del idioma en el servidor, el contenido de producto y las páginas de intención de compra en un único sistema de localización.