frontend-internationalization-best-practices by sergiodxa/agent-skills
npx skills add https://github.com/sergiodxa/agent-skills --skill frontend-internationalization-best-practices使用 remix-i18next 构建 React Router 国际化设置的指南。重点关注中间件检测、区域设置存储、类型安全以及客户端/服务器同步。
remix-i18next 中间件/api/locales 提供区域资源配置 createI18nextMiddleware 和类型安全的资源。
export const [i18nextMiddleware, getLocale, getInstance] =
createI18nextMiddleware({
detection: {
supportedLanguages: ["es", "en"],
fallbackLanguage: "en",
cookie: localeCookie,
},
i18next: { resources },
plugins: [initReactI18next],
});
按语言定义区域资源并重新导出。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
// app/locales/en/translation.ts
export default { title: "Example" };
小型应用使用单一命名空间;大型应用使用多个命名空间。
// 大型应用:通用 + 路由命名空间
export default { common, home, notFound };
优先使用 cookie/会话以提高速度,并以数据库作为真实数据源。
export const [i18nextMiddleware, getLocale] = createI18nextMiddleware({
detection: { cookie: localeCookie, fallbackLanguage: "en" },
});
将区域设置存储在 cookie/会话中并保持同步。
return data(
{ locale },
{ headers: { "Set-Cookie": await localeCookie.serialize(locale) } },
);
将区域设置发送到 UI 并同步 <html lang dir>。
export async function loader({ context }: Route.LoaderArgs) {
let locale = getLocale(context);
return data(
{ locale },
{ headers: { "Set-Cookie": await localeCookie.serialize(locale) } },
);
}
使用 htmlTag 检测初始化 i18next 客户端。
i18next.init({ detection: { order: ["htmlTag"], caches: [] } });
在 SSR 中使用 I18nextProvider 重用中间件实例。
<I18nextProvider i18n={getInstance(routerContext)}>
<ServerRouter context={entryContext} url={request.url} />
</I18nextProvider>
通过 /api/locales/:lng/:ns 提供资源,并包含验证和缓存头。
return data(namespaces[ns.data], { headers });
在加载器中使用绑定的 t(),在组件中使用 useTranslation。
let t = getInstance(context).getFixedT(locale);
提供一个 404 路由,以便中间件运行并加载翻译。
每周安装量
91
代码仓库
GitHub 星标数
80
首次出现
2026年1月29日
安全审计
安装于
codex72
opencode72
github-copilot67
gemini-cli64
cursor60
claude-code59
Guidelines for building a React Router i18n setup with remix-i18next. Focuses on middleware detection, locale storage, type safety, and client/server synchronization.
remix-i18next middleware/api/localesConfigure createI18nextMiddleware and type-safe resources.
export const [i18nextMiddleware, getLocale, getInstance] =
createI18nextMiddleware({
detection: {
supportedLanguages: ["es", "en"],
fallbackLanguage: "en",
cookie: localeCookie,
},
i18next: { resources },
plugins: [initReactI18next],
});
Define locale resources per language and re-export.
// app/locales/en/translation.ts
export default { title: "Example" };
Use a single namespace for small apps; multiple namespaces for large apps.
// Large app: common + route namespaces
export default { common, home, notFound };
Prefer cookie/session for speed, with DB as source of truth.
export const [i18nextMiddleware, getLocale] = createI18nextMiddleware({
detection: { cookie: localeCookie, fallbackLanguage: "en" },
});
Store locale in cookie/session and keep it in sync.
return data(
{ locale },
{ headers: { "Set-Cookie": await localeCookie.serialize(locale) } },
);
Send locale to the UI and sync <html lang dir>.
export async function loader({ context }: Route.LoaderArgs) {
let locale = getLocale(context);
return data(
{ locale },
{ headers: { "Set-Cookie": await localeCookie.serialize(locale) } },
);
}
Initialize i18next client with htmlTag detection.
i18next.init({ detection: { order: ["htmlTag"], caches: [] } });
Reuse the middleware instance in SSR with I18nextProvider.
<I18nextProvider i18n={getInstance(routerContext)}>
<ServerRouter context={entryContext} url={request.url} />
</I18nextProvider>
Serve /api/locales/:lng/:ns with validation and cache headers.
return data(namespaces[ns.data], { headers });
Use the bound t() in loaders and useTranslation in components.
let t = getInstance(context).getFixedT(locale);
Provide a 404 route so middleware runs and translations load.
Weekly Installs
91
Repository
GitHub Stars
80
First Seen
Jan 29, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex72
opencode72
github-copilot67
gemini-cli64
cursor60
claude-code59
TanStack Query v5 完全指南:React 数据管理、乐观更新、离线支持
2,500 周安装
Google Sheets 导出 CSV 备份教程 - 使用 Google Workspace CLI 快速备份表格数据
8,300 周安装
GitHub Copilot README 生成器提示 - 自动创建项目文档的 AI 助手工具
8,000 周安装
GitHub Pull Request自动创建工具 - 根据PR模板规范生成代码合并请求
8,100 周安装
PDFtk Server 命令行工具:合并拆分加密解密PDF,批量处理PDF文档
8,000 周安装
GitHub贡献指南助手 - 安全贡献代码、遵循项目规范、自动化PR流程
8,000 周安装
C# XUnit单元测试最佳实践指南:项目设置、数据驱动测试与断言技巧
8,000 周安装