Remix & Hydrogen — Better I18N

Bu sayfada

Overview
Features
Quick Start
Guide
Comparison
AI Tooling

Overview #

@better-i18n/remix brings CDN-powered translations to Remix and Shopify Hydrogen apps. Unlike client-side solutions, translations are loaded on the server before rendering — no loading spinners, no layout shift.

The SDK is built on top of @better-i18n/core and adds Remix-specific utilities:

Server-side data loading — Translations are fetched in server.ts or loaders, not on the client
Provider-optional — Raw messages accessible as loader data; add I18nextProvider or RemixI18nProvider for hook-based translations
TtlCache singleton — A single module-scoped instance shares cache across all requests
Accept-Language detection — Built-in locale detection from request headers

Features #

CDN Delivery — Translations served from the edge via Better i18n CDN. Sub-50ms response times globally.
Server-Side Loading — Fetch translations before render. No client-side loading states or hydration mismatches.
Locale Detection — Built-in Accept-Language header parsing with quality-factor sorting and smart fallbacks.
Hydrogen Support — First-class Shopify Hydrogen integration with Storefront API locale bridging.

Quick Start #

app/i18n.server.ts

import { createRemixI18n } from "@better-i18n/remix";

export const i18n = createRemixI18n({
  projectId: "my-company/web-app",
  defaultLocale: "en",
});

app/root.tsx

import { i18n } from "~/i18n.server";

export async function loader({ request }: LoaderFunctionArgs) {
  const locale = await i18n.detectLocale(request);
  const messages = await i18n.getMessages(locale);
  return { locale, messages };
}

export default function App() {
  const { locale, messages } = useLoaderData<typeof loader>();

  return (
    <html lang={locale} translate="no">
      <head><Meta /><Links /></head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

Guide #

Setup — Step-by-step installation and configuration.
Locale Detection — Accept-Language detection, URL-based detection, and custom strategies.
Routing — Locale-prefixed URLs, LocaleLink, and LocaleSwitcher components.
Hydrogen — Shopify Hydrogen integration with Storefront API locale bridging.
API Reference — Complete API documentation for all exports.

Comparison #

Feature	Remix	Next.js	TanStack Start	Vite
Rendering	SSR	SSR + ISR	SSR	CSR only
Data loading	Loaders	Server Components	Server Functions	Client fetch
Provider needed	Optional	Optional	Yes	Yes
Hydrogen support	Yes	No	No	No
Middleware	Manual	Built-in	Built-in	N/A

Choose @better-i18n/remix for Remix or Shopify Hydrogen apps. For Next.js, see @better-i18n/next. For Vite SPAs, see Vite.

AI Tooling #

Now that you've integrated the SDK, your AI agent can check coverage, translate keys, and publish — all without leaving your editor.

MCP Server — Translate keys, check coverage, and publish — all from your editor via Cursor, Claude Code, or Windsurf.
Agent Skill — Permanent better-i18n knowledge for your AI agent — SDK patterns, CDN behavior, key conventions. No prompts needed each session.