Vai al contenuto
Remix & Hydrogen i18n

i18n per Remix e Hydrogen, per storefront e app guidate dalle route

Usa Better I18N per mantenere allineati in un unico flusso di lavoro lo stato della lingua reso sul server, i contenuti localizzati dello storefront e le route rivolte ai motori di ricerca.

Setup

Get started in 3 steps

Install the app-side SDK

Usa l'SDK basato su provider nella tua app Remix o Hydrogen, così i contenuti tradotti possono essere condivisi tra i moduli di route.

terminal
npm install @better-i18n/use-intl use-intl

Risolvi la lingua sul server

Leggi la lingua dalla richiesta, dai parametri di route o dal contesto dello storefront e passala alla radice dell'app.

app/root.tsx
export async function loader({ request }: LoaderFunctionArgs) {
  const locale = resolveLocaleFromRequest(request);

  return json({ locale });
}

Idrata il provider nella route radice

Fornisci la lingua una sola volta, così route annidate, pagine prodotto e interfaccia del carrello condividono la stessa fonte di traduzioni.

app/root.tsx
export default function App() {
  const { locale } = useLoaderData<typeof loader>();

  return (
    <BetterI18nProvider project="your-org/your-storefront" locale={locale}>
      <Outlet />
    </BetterI18nProvider>
  );
}
Capabilities

Perché usare Better I18N con Remix e Hydrogen?

Gestione della lingua caricata sul server, adatta ai loader di Remix e ai flussi storefront di Hydrogen
Adatto a pagine di categoria, prodotto e contenuto sensibili alla SEO
Un solo flusso di traduzione per l'interfaccia dello storefront, le pagine account e le route di marketing
Supporta strategie di lingua basate sulle route senza fragili duplicazioni di file
Permette agli sviluppatori di pubblicare aggiornamenti localizzati dello storefront senza attendere un nuovo deploy
Mantiene i contenuti di confronto e di intento d'acquisto allineati alle pagine di localizzazione dei prodotti
Example

Route-level locale wiring

Una configurazione basata su provider, adatta a framework guidati dai loader e ad alberi di route per storefront.

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>
  );
}

Other frameworks

Get started

Pubblica storefront localizzati senza flussi di lavoro frammentati

Gestisci la lingua sul server, i contenuti di prodotto e le pagine di intento d'acquisto in un unico sistema di localizzazione.