Remix & Hydrogen i18n
Remix & Hydrogen i18n for storefront and route-driven apps
Use Better i18n to keep server-rendered locale state, localized storefront content, and search-facing routes aligned in one workflow.
Get started in 3 steps
1
Install the app-side SDK
Use the provider-based SDK in your Remix or Hydrogen app so translated content can be shared across route modules.
terminal
npm install @better-i18n/use-intl use-intl
2
Resolve locale on the server
Read locale from request, route params, or storefront context and pass it into your app root.
app/root.tsx
export async function loader({ request }: LoaderFunctionArgs) {
const locale = resolveLocaleFromRequest(request);
return json({ locale });
}3
Hydrate the provider in the root route
Provide the locale once so nested routes, product pages, and cart UI all share the same translation source.
app/root.tsx
export default function App() {
const { locale } = useLoaderData<typeof loader>();
return (
<BetterI18nProvider project="your-org/your-storefront" locale={locale}>
<Outlet />
</BetterI18nProvider>
);
}Why use Better i18n with Remix and Hydrogen?
Server-loaded locale handling that fits Remix loaders and Hydrogen storefront flows
Good fit for SEO-sensitive category, product, and content pages
One translation workflow for storefront UI, account pages, and marketing routes
Supports route-based locale strategies without fragile file duplication
Lets developers ship localized storefront updates without blocking on redeploys
Keeps comparison and buyer-intent content aligned with product localization pages
Route-level locale wiring
A provider-based setup that fits loader-driven frameworks and storefront route trees.
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>
);
}Ship localized storefronts without fragmented workflows
Keep server locale handling, product content, and buyer-intent pages in one localization system.