intlayer (Aymericzip)

Per-component i18n

AI-powered translation. Visual Editor. Multilingual CMS.

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

什么是Intlayer？

大多数i18n库要么太复杂、太僵化，要么不是为现代框架构建的。

Intlayer是一个 现代i18n解决方案 用于网络和移动应用程序。\ 它与框架无关， 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 每个内容的功能。使用单个钩子直接检索所有内容。

- React集成 | | | 一致的服务器组件实现

非常适合Next.js服务器组件，对客户端和服务器组件使用相同的实现，无需通过 t 跨每个服务器组件运行。

- 服务器组件 | | | 有组织的代码库

让你的代码库更有条理：1个组件=1个字典在同一个文件夹中。翻译接近各自的组成部分，提高了可维护性和清晰度。

- Intlayer的工作原理 | | | 增强路由

完全支持应用程序路由，无缝适应复杂的应用程序结构，适用于Next.js、React、Vite、Vue.js等。

- 探索Next.js集成 | | | Markdown支持

导入和解释、区域设置文件和远程Markdown，用于隐私政策、文档等多语言内容。在代码中解释Markdown元数据并使其可访问。

- 内容文件 | | | 免费可视化编辑器和CMS

免费的可视化编辑器和CMS可供内容作者使用，无需本地化平台。使用Git保持内容同步，或使用CMS将其全部或部分外部化。

- Intlayer编辑器 - 内层CMS | | | 树木可摇动内容物

树可摇动的内容，减少最终捆绑的大小。加载每个组件的内容，不包括捆绑包中任何未使用的内容。支持延迟加载，提高应用加载效率。

- 应用构建优化 | | | 静态渲染

不会阻止静态渲染。

- Next.js集成 | | | 人工智能驱动的翻译

使用Intlayer的高级人工智能翻译工具，使用您自己的人工智能提供商/API密钥，只需点击一下即可将您的网站转换为231种语言。

- CI/CD集成 - 内层 CLI - 自动填充 | | | MCP服务器集成

为IDE自动化提供MCP（模型上下文协议）服务器，直接在您的开发环境中实现无缝内容管理和i18n工作流。

- MCP服务器 | | | VSCode扩展

Intlayer提供了一个VSCode扩展，可帮助您管理内容和翻译、构建词典、翻译内容等。

- VSCode扩展 | | | 互操作性

允许与react-i18next、next-i18next，next intl、react intl、vue-i18n的互操作性。

- Intlayer和react intl - Intlayer和next intl - 内层和下层-i18next - 内层和真空i18n |

______________________________________________________________________

📦 安装

立即开始您的Intlayer之旅，体验更平稳、更强大的国际化方法。

npm install 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 
{title}
;
};

获取完整指南→

🎥 YouTube上的实时教程


目录

探索我们全面的文档，开始使用Intlayer，并学习如何将其集成到您的项目中。

📘 Get Started

Why Intlayer?

Introduction

⚙️ Concept

How Intlayer Works

Configuration

Intlayer CLI

Compiler

Intlayer Editor

Intlayer CMS

Dictionary

Per-Locale Content Declaration File

Translation

Enumeration

Condition

Nesting

Markdown

Function Fetching

Insertion

File

🌐 Environment

Intlayer with Next.js 16

Next.js 15

Next.js 14 (App Router)

Next.js Page Router

Next.js using Compiler

React CRA

Vite + React

Vite + React using Compiler

React-router-v7

Tanstack start

Solid

Astro

React

Vue

Svelte

Solid

Vanilla JS

Lit

React Native

Vite + Svelte

SvelteKit

Vite + Preact

Vite + Vue

Vite + Nuxt

Vite + Solid

Angular

Backend

Express

NestJS

Fastify

AdonisJS

Hono

📊 Benchmark

Next.js

TanStack Start

Vue

Solid

Svelte

📰 Blog

What is i18n

i18n and SEO

Intlayer and i18next

Intlayer and react-intl

Intlayer and next-intl

🌐 自述其他语言

English • 简体中文 • Русский • 日本語 • Français • 한국어 • Español • Deutsch • العربية • Italiano • English (UK) • Português • हिन्दी • Türkçe

🤝 社区

Intlayer是为社区构建的，我们很乐意听取您的意见！

• 有什么建议吗？ 提出问题
• 发现错误或改进？ 提交PR
• 需要帮助或想要连接？ 加入我们的Discord

您还可以关注我们：

贡献

有关为该项目做出贡献的更多详细指南，请参阅 CONTRIBUTING.md 文件。它包含有关我们的开发过程、提交消息约定和发布过程的重要信息。您的贡献对我们来说是宝贵的，我们感谢您为使这个项目变得更好所做的努力！

贡献于 , GitLab，或 比特桶.

感谢您的支持

如果你喜欢Intlayer，给我们一个⭐ 在GitHub上。它有助于其他人发现该项目！ .