aymericzip/intlayer

aymericzip/intlayer has 864 GitHub stars and 129 forks. GitHot measured +1 stars in 24 hours and +2 in 7 days. Last checked 2026-11-09 16:48 UTC. Last push 2026-10-31.

这些数字如何统计

Per-component Internationalisation solution for JS application. Type-Safe. Translate with AI. Edit Visually.

864 星标 129 forks +1 24小时

实测星标增长

24小时: +1
7天: +2
15天: 更新延迟
1个月: 更新延迟

各周期内的星标净变化，周期相互重叠，并非每日新增。缺失的测量保持空白。星标代表关注度，不代表软件质量。

docs/docs/zh/readme.md

原文

每个组件的国际化 (i18n)

AI 驱动的翻译。可视化编辑器。多语言 CMS。

Docs • Next.js • React + Vite • CMS • Discord

观看视频

什么是 Intlayer？

大多数国际化 (i18n) 库要么过于复杂，要么过于死板，或者不是为现代框架构建的。

Intlayer 是面向 Web 和移动应用程序的现代国际化解决方案。
它与框架无关，由 AI 驱动，并包含免费的 CMS 和可视化编辑器。

通过按语言区分的内容文件、TypeScript 自动补全、可摇树的词典以及 CI/CD 集成，Intlayer 让国际化变得更快速、简洁和智能。

Intlayer 的主要优势：

功能	描述
	多框架支持 Intlayer 兼容所有主流框架和库，包括 Next.js、React、Vite、Vue.js、Nuxt、Preact、Express 等。
	基于 JavaScript 的内容管理利用 JavaScript 的灵活性高效地定义和管理您的内容。 - 内容声明
	按语言区分的内容声明文件通过在自动生成之前声明一次内容，加快您的开发速度。 - 按语言区分的内容声明文件
	编译器 Intlayer 编译器自动从组件中提取内容并创建词典文件。 - 编译器
	类型安全环境利用 TypeScript 确保您的内容定义和代码无错误，同时享受 IDE 自动补全的便利。 - TypeScript 配置
	简化设置通过最少的配置快速启动。轻松调整国际化、路由、AI、构建和内容管理的设置。 - 探索 Next.js 集成
	简化内容获取无需为每一条内容调用 `t` 函数。使用单一Hook即可直接获取所有内容。 - 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 自动化，使内容管理和 i18n 工作流程能够直接在您的开发环境中无缝进行。 - MCP 服务器
	VSCode 扩展 Intlayer 提供了一个 VSCode 扩展，帮助您管理内容和翻译、构建词典、翻译内容等。 - VSCode 扩展
	互操作性允许与 react-i18next、next-i18next、next-intl、react-intl、vue-i18n 进行互操作。 - Intlayer 与 react-intl - Intlayer 与 next-intl - Intlayer 与 next-i18next - Intlayer 与 vue-i18n - Intlayer 兼容适配器
	性能与基准测试使用先进的摇树优化（tree-shaking）和动态加载来提高性能，并使解决方案保持尽可能轻量。 - 性能与基准测试

📦 安装

今天就开始使用 Intlayer，体验更顺畅、更强大的国际化方式。

npm install intlayer react-intlayer

yarn add intlayer react-intlayer

pnpm add intlayer react-intlayer

bun add intlayer react-intlayer

⚡ 快速入门 (Next.js)

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

// app/home.content.ts
import { t, type Dictionary } from "intlayer";

const content = {
  key: "home",
  content: {
    title: t({
      en: "Home",
      fr: "Accueil",
      es: "Inicio",
    }),
  },
} satisfies Dictionary;

export default content;

// app/page.tsx
import { useIntlayer } from "react-intlayer";

const HomePage = () => {
  const { title } = useIntlayer("home");

  return <h1>{title}</h1>;
};

获取完整指南 →