为什么你应该考虑使用 Intlayer？

什么是 Intlayer？

Intlayer 是一个专为 JavaScript 开发者设计的国际化库。它允许你在代码的任何地方声明内容。它将多语言内容的声明转换为结构化的字典，方便集成到你的代码中。通过使用 TypeScript，Intlayer 使你的开发更加稳健和高效。

为什么创建 Intlayer？

Intlayer 的创建是为了解决所有常见国际化库（如 next-intl、react-i18next、react-intl、next-i18next、react-intl 和 vue-i18n）普遍存在的一个问题。

所有这些解决方案都采用集中式的方法来列出和管理你的内容。例如：

.├── locales│   ├── en.json│   ├── fr.json│   └── es.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

或者这里使用命名空间：

.├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

这种架构会减慢开发进度，并使代码库更难维护，原因有以下几点：

1. 对于创建的任何新组件，您需要：

   • 在 locales 文件夹中创建新的资源/命名空间
   • 记得在页面中导入新的命名空间
   • 翻译您的内容（通常通过从 AI 提供者手动复制/粘贴完成）

2. 对于组件的任何更改，您需要：

   • 查找相关的资源/命名空间（通常远离组件）
   • 翻译您的内容
   • 确保您的内容在所有语言环境中都是最新的
   • 验证您的命名空间中不包含未使用的键/值
   • 确保所有语言环境的 JSON 文件结构一致

在专业项目中使用这些解决方案时，通常会使用本地化平台来帮助管理内容的翻译。然而，对于大型项目来说，这可能很快变得昂贵。

为了解决这个问题，Intlayer 采用了一种按组件范围划分内容的方法，并将内容保持在组件附近，就像我们经常对 CSS（styled-components）、类型、文档（storybook）或单元测试（jest）所做的那样。

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

import { t, type Dictionary } from "intlayer";const componentExampleContent = {  key: "component-example",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },} satisfies Dictionary;export default componentExampleContent;

import { useIntlayer } from "react-intlayer";export const ComponentExample = () => {  const { myTranslatedContent } = useIntlayer("component-example");  return <span>{myTranslatedContent}</span>;};

这种方法允许您：

1. 提高开发速度

   • 可以使用 VSCode 扩展创建 .content.{{ts|mjs|cjs|json}} 文件
   • IDE 中的自动补全 AI 工具（如 GitHub Copilot）可以帮助你声明内容，减少复制/粘贴

2. 清理代码库

   • 降低复杂性
   • 提高可维护性

3. 更轻松地复制组件及其相关内容（例如：登录/注册组件等）

   • 限制影响其他组件内容的风险
   • 通过复制/粘贴内容从一个应用到另一个应用，无需外部依赖

4. 避免因未使用的组件而污染代码库，产生未使用的键/值

   • 如果你不使用一个组件，Intlayer 不会导入它的相关内容
   • 如果你删除一个组件，你会更容易记得删除其相关内容，因为它们会存在于同一个文件夹中

5. 降低 AI 代理声明多语言内容的推理成本

   • AI 代理无需扫描整个代码库来确定内容的实现位置
   • 翻译可以通过 IDE 中的自动补全 AI 工具（如 GitHub Copilot）轻松完成

Intlayer 的附加功能

功能	描述
	跨框架支持 Intlayer 兼容所有主流框架和库，包括 Next.js、React、Vite、Vue.js、Nuxt、Preact、Express 等。
	基于JavaScript的内容管理 利用JavaScript的灵活性，高效地定义和管理您的内容。 - 内容声明
	每语言内容声明文件 通过在自动生成之前只声明一次内容，加快您的开发速度。 - 每语言内容声明文件
	类型安全环境 利用 TypeScript 确保您的内容定义和代码无错误，同时享受 IDE 自动补全的便利。 - TypeScript 配置
	简化设置 通过最少的配置快速启动运行。轻松调整国际化、路由、AI、构建和内容处理的设置。 - 探索 Next.js 集成
	简化的内容获取 无需为每一条内容调用你的 t 函数。使用单个钩子直接获取所有内容。 - React 集成
	一致的服务器组件实现 完美适用于 Next.js 服务器组件，客户端和服务器组件使用相同的实现，无需在每个服务器组件之间传递你的 t 函数。 - 服务器组件
	有序的代码库 保持代码库更有条理：1 个组件 = 同一文件夹中的 1 个字典。将翻译内容放置在各自组件附近，有助于提升可维护性和清晰度。 - Intlayer 的工作原理
	增强路由 全面支持应用路由，能够无缝适应复杂的应用结构，适用于 Next.js、React、Vite、Vue.js 等框架。 - 探索 Next.js 集成
	Markdown 支持 导入并解析本地化文件和远程 Markdown，用于多语言内容，如隐私政策、文档等。解析并使 Markdown 元数据在代码中可访问。 - 内容文件
	免费可视化编辑器和CMS 为内容创作者提供免费的可视化编辑器和CMS，无需使用本地化平台。通过Git保持内容同步，或使用CMS将内容完全或部分外部化。 - Intlayer 编辑器 - Intlayer CMS
	可摇树内容 可摇树内容，减少最终包的大小。按组件加载内容，排除任何未使用的内容。支持懒加载以提升应用加载效率。 - 应用构建优化
	静态渲染 不会阻塞静态渲染。 - Next.js 集成
	AI 驱动的翻译 使用 Intlayer 的先进 AI 驱动翻译工具，结合您自己的 AI 提供商/API 密钥，只需一键即可将您的网站转换为 231 种语言。 - CI/CD 集成 - Intlayer CLI - 自动填充
	MCP 服务器集成 提供一个 MCP（模型上下文协议）服务器，用于 IDE 自动化，实现内容管理和国际化工作流在您的开发环境中无缝进行。 - MCP 服务器
	VSCode 扩展 Intlayer 提供了一个 VSCode 扩展，帮助您管理内容和翻译，构建词典，翻译内容等。 - VSCode 扩展
	互操作性 支持与 react-i18next、next-i18next、next-intl 和 react-intl 的互操作。 - Intlayer 与 react-intl - Intlayer 与 next-intl - Intlayer 与 next-i18next

Intlayer 与其他解决方案的比较

文档历史