Remix & Hydrogen i18n
面向店面与路由驱动应用的 Remix 和 Hydrogen i18n
使用 Better I18N，在同一个工作流中让服务端渲染的语言状态、本地化店面内容和面向搜索的路由保持一致。
Setup
Get started in 3 steps
Install the app-side SDK
在 Remix 或 Hydrogen 应用中使用基于 provider 的 SDK，让翻译内容可以在各个路由模块之间共享。
terminal
npm install @better-i18n/use-intl use-intl在服务端解析语言
从请求、路由参数或店面上下文中读取语言，并将其传入应用根节点。
app/root.tsx
export async function loader({ request }: LoaderFunctionArgs) {
const locale = resolveLocaleFromRequest(request);
return json({ locale });
}在根路由中完成 provider 的水合
只需提供一次语言，嵌套路由、产品页和购物车界面便共用同一个翻译来源。
app/root.tsx
export default function App() {
const { locale } = useLoaderData<typeof loader>();
return (
<BetterI18nProvider project="your-org/your-storefront" locale={locale}>
<Outlet />
</BetterI18nProvider>
);
}Capabilities
为什么在 Remix 和 Hydrogen 中使用 Better I18N？
在服务端加载的语言处理，契合 Remix loader 和 Hydrogen 店面流程
适合对 SEO 敏感的分类页、产品页和内容页
店面界面、账户页面和营销路由共用一套翻译工作流
支持基于路由的语言策略，无需脆弱的文件复制
开发者可以发布本地化的店面更新，无需等待重新部署
让对比内容和购买意向内容与产品本地化页面保持一致
Example
Route-level locale wiring
基于 provider 的配置方式，适合以 loader 驱动的框架和店面路由树。
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
发布本地化店面，无需割裂的工作流
把服务端语言处理、产品内容和购买意向页面放在同一个本地化系统中。