React Router 国际化最佳实践：使用 remix-i18next 实现多语言应用

frontend-internationalization-best-practices by sergiodxa/agent-skills

96 周安装量

82 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/sergiodxa/agent-skills --skill frontend-internationalization-best-practices

React 国际化前端架构

🇨🇳中文介绍

国际化最佳实践

使用 remix-i18next 构建 React Router 国际化设置的指南。重点关注中间件检测、区域设置存储、类型安全以及客户端/服务器同步。

适用场景

为 React Router 应用添加国际化支持
连接 remix-i18next 中间件
实现语言切换或区域设置检测
从 /api/locales 提供区域资源

规则摘要

设置与中间件（关键）

setup-middleware - @rules/setup-middleware.md

配置 createI18nextMiddleware 和类型安全的资源。

export const [i18nextMiddleware, getLocale, getInstance] =
  createI18nextMiddleware({
    detection: {
      supportedLanguages: ["es", "en"],
      fallbackLanguage: "en",
      cookie: localeCookie,
    },
    i18next: { resources },
    plugins: [initReactI18next],
  });

locales-structure - @rules/locales-structure.md

按语言定义区域资源并重新导出。

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

命名空间（高优先级）

namespaces-strategy - @rules/namespaces-strategy.md

小型应用使用单一命名空间；大型应用使用多个命名空间。

// 大型应用：通用 + 路由命名空间
export default { common, home, notFound };

区域设置检测与持久化（关键）

locale-detection - @rules/locale-detection.md

优先使用 cookie/会话以提高速度，并以数据库作为真实数据源。

export const [i18nextMiddleware, getLocale] = createI18nextMiddleware({
  detection: { cookie: localeCookie, fallbackLanguage: "en" },
});

language-switcher - @rules/language-switcher.md

将区域设置存储在 cookie/会话中并保持同步。

return data(
  { locale },
  { headers: { "Set-Cookie": await localeCookie.serialize(locale) } },
);

客户端与服务器集成（关键）

root-locale-sync - @rules/root-locale-sync.md

将区域设置发送到 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) } },
  );
}

entry-client-init - @rules/entry-client-init.md

使用 htmlTag 检测初始化 i18next 客户端。

i18next.init({ detection: { order: ["htmlTag"], caches: [] } });

entry-server-provider - @rules/entry-server-provider.md

在 SSR 中使用 I18nextProvider 重用中间件实例。

<I18nextProvider i18n={getInstance(routerContext)}>
  <ServerRouter context={entryContext} url={request.url} />
</I18nextProvider>

资源路由与缓存（高优先级）

locales-resource-route - @rules/locales-resource-route.md

通过 /api/locales/:lng/:ns 提供资源，并包含验证和缓存头。

return data(namespaces[ns.data], { headers });

UI 使用（中等优先级）

use-bound-t-in-loader - @rules/use-bound-t-in-loader.md

在加载器中使用绑定的 t()，在组件中使用 useTranslation。

let t = getInstance(context).getFixedT(locale);

未找到页面（中等优先级）

not-found-i18n - @rules/not-found-i18n.md

提供一个 404 路由，以便中间件运行并加载翻译。

🇺🇸English

Internationalization Best Practices

Guidelines for building a React Router i18n setup with remix-i18next. Focuses on middleware detection, locale storage, type safety, and client/server synchronization.

When to Apply

Adding i18n to a React Router app
Wiring remix-i18next middleware
Implementing language switching or locale detection
Serving locale resources from /api/locales

Rules Summary

Setup & Middleware (CRITICAL)

setup-middleware - @rules/setup-middleware.md

Configure createI18nextMiddleware and type-safe resources.

export const [i18nextMiddleware, getLocale, getInstance] =
  createI18nextMiddleware({
    detection: {
      supportedLanguages: ["es", "en"],
      fallbackLanguage: "en",
      cookie: localeCookie,
    },
    i18next: { resources },
    plugins: [initReactI18next],
  });

locales-structure - @rules/locales-structure.md

Define locale resources per language and re-export.

// app/locales/en/translation.ts
export default { title: "Example" };

Namespaces (HIGH)

namespaces-strategy - @rules/namespaces-strategy.md

Use a single namespace for small apps; multiple namespaces for large apps.

// Large app: common + route namespaces
export default { common, home, notFound };

Locale Detection & Persistence (CRITICAL)

locale-detection - @rules/locale-detection.md

Prefer cookie/session for speed, with DB as source of truth.

export const [i18nextMiddleware, getLocale] = createI18nextMiddleware({
  detection: { cookie: localeCookie, fallbackLanguage: "en" },
});

language-switcher - @rules/language-switcher.md

Store locale in cookie/session and keep it in sync.

return data(
  { locale },
  { headers: { "Set-Cookie": await localeCookie.serialize(locale) } },
);

Client & Server Integration (CRITICAL)

root-locale-sync - @rules/root-locale-sync.md

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

entry-client-init - @rules/entry-client-init.md

Initialize i18next client with htmlTag detection.

i18next.init({ detection: { order: ["htmlTag"], caches: [] } });

entry-server-provider - @rules/entry-server-provider.md

Reuse the middleware instance in SSR with I18nextProvider.

<I18nextProvider i18n={getInstance(routerContext)}>
  <ServerRouter context={entryContext} url={request.url} />
</I18nextProvider>

Resource Routes & Caching (HIGH)

locales-resource-route - @rules/locales-resource-route.md

Serve /api/locales/:lng/:ns with validation and cache headers.

return data(namespaces[ns.data], { headers });

UI Usage (MEDIUM)

use-bound-t-in-loader - @rules/use-bound-t-in-loader.md

Use the bound t() in loaders and useTranslation in components.

let t = getInstance(context).getFixedT(locale);

Not Found (MEDIUM)

not-found-i18n - @rules/not-found-i18n.md

Provide a 404 route so middleware runs and translations load.

Weekly Installs

Repository

sergiodxa/agent-skills

GitHub Stars

First Seen

Jan 29, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex72

opencode72

github-copilot67

gemini-cli64

cursor60

claude-code59

TanStack Query v5 完全指南：React 数据管理、乐观更新、离线支持

2,500 周安装

React Router 国际化最佳实践：使用 remix-i18next 实现多语言应用

🇨🇳中文介绍

国际化最佳实践

适用场景

规则摘要

设置与中间件（关键）

setup-middleware - @rules/setup-middleware.md

locales-structure - @rules/locales-structure.md

相关 Skills

命名空间（高优先级）

namespaces-strategy - @rules/namespaces-strategy.md

区域设置检测与持久化（关键）

locale-detection - @rules/locale-detection.md

language-switcher - @rules/language-switcher.md

客户端与服务器集成（关键）

root-locale-sync - @rules/root-locale-sync.md

entry-client-init - @rules/entry-client-init.md

entry-server-provider - @rules/entry-server-provider.md

资源路由与缓存（高优先级）

locales-resource-route - @rules/locales-resource-route.md

UI 使用（中等优先级）

use-bound-t-in-loader - @rules/use-bound-t-in-loader.md

未找到页面（中等优先级）

not-found-i18n - @rules/not-found-i18n.md

🇺🇸English

Internationalization Best Practices

When to Apply

Rules Summary

Setup & Middleware (CRITICAL)

setup-middleware - @rules/setup-middleware.md

locales-structure - @rules/locales-structure.md

Namespaces (HIGH)

namespaces-strategy - @rules/namespaces-strategy.md

Locale Detection & Persistence (CRITICAL)

locale-detection - @rules/locale-detection.md

language-switcher - @rules/language-switcher.md

Client & Server Integration (CRITICAL)

root-locale-sync - @rules/root-locale-sync.md

entry-client-init - @rules/entry-client-init.md

entry-server-provider - @rules/entry-server-provider.md

Resource Routes & Caching (HIGH)

locales-resource-route - @rules/locales-resource-route.md

UI Usage (MEDIUM)

use-bound-t-in-loader - @rules/use-bound-t-in-loader.md

Not Found (MEDIUM)

not-found-i18n - @rules/not-found-i18n.md

最新 Skills