@intlayer/docs 8.12.4 → 9.0.0-canary.10

package/docs/zh/intlayer_with_nextjs_page_router.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js Page Router i18n - 翻译你的应用的完整指南"
 description: "告别 i18next。2026 年构建多语言 (i18n) Next.js Page Router 应用的完整指南。使用 AI 代理翻译并优化包体积、SEO 和性能。"
 keywords:
@@ -28,6 +28,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "初始化历史"
+author: aymericzip
 ---
 
 # 使用Intlayer翻译您的Next.js and Page Router | 国际化(i18n)
@@ -57,11 +58,16 @@ history:
   </Tab>
 </Tabs>
 
+## 目录
+
+<TOC/>
+
 ## 为什么选择 Inlayer 而不是替代品？
 
 与“next-intl”或“i18next”等主要解决方案相比，Intlayer是一个具有集成优化的解决方案，例如：
 
-**完整的 Next.js 覆盖**
+<AccordionGroup>
+<Accordion header="完整的 Next.js 覆盖">
 
 Intlayer 经过优化，可以与 **服务器组件** 配合使用，以实现高效渲染，并且与 [**Turbopack**](https://nextjs.org/docs/architecture/turbopack) 完全兼容。它不会阻止静态渲染，并提供中间件以及扩展国际化 (i18n) 所需的所有功能。
 
@@ -69,56 +75,89 @@ Intlayer 经过优化，可以与 **服务器组件** 配合使用，以实现
 > 区域设置路由对于 SEO、Bundle 大小和性能很有用。如果不需要，可以参考这个[指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_no_locale_path.md)。
 > 对于带有 App Router 的 Next.js 12、13、14 和 15，请参阅此[指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_14.md)。
 
-**捆绑尺寸**
+</Accordion>
+
+<Accordion header="捆绑尺寸">
 
 不要将大量 JSON 文件加载到页面中，而只需加载必要的内容。 Intlayer 有助于**将捆绑包和页面大小减少多达 50%**。
 
-**可维护性**
+</Accordion>
+
+<Accordion header="可维护性">
 
 确定应用程序内容的范围**有利于大型应用程序的维护**。您可以复制或删除单个功能文件夹，而无需承担检查整个内容代码库的精神负担。此外，Intlayer 具有**完全类型化 (fully typed)**，以确保您的内容的准确性。
 
-**人工智能代理**
+</Accordion>
+
+<Accordion header="人工智能代理">
 
 共置内容**减少大型语言模型 (LLM) 所需的上下文**。 Intlayer 还附带了一套工具，例如用于测试缺失翻译的 **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** 和 **[agent技能](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**，使 AI 代理的开发者体验 (DX) 更加流畅。
 
-**自动化**
+</Accordion>
+
+<Accordion header="自动化">
 
 使用您选择的法学硕士，通过自动化在 CI/CD 管道中进行翻译，而费用由您的 AI 提供商承担。 Intlayer 还提供了一个**编译器**来自动提取内容，以及一个[网络平台](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)来帮助**在后台翻译**。
 
-**表现**
+</Accordion>
+
+<Accordion header="表现">
 
 将大量 JSON 文件连接到组件可能会导致性能和反应性问题。 Intlayer 可在构建时 (build time)优化您的内容加载。
 
-**无需开发即可扩展**
+</Accordion>
+
+<Accordion header="无需开发即可扩展">
 
 Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)**和一个**[完整的 CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** 来帮助您管理多语言内容**实时**，与译员、文案人员和其他团队成员无缝协作。内容可以本地和/或远程存储。
 
+</Accordion>
+</AccordionGroup>
+
 ---
 
 ## 使用 Page Router 在 Next.js 应用中设置 Intlayer 的分步指南
 
-### 第一步：安装依赖
+<Steps>
+
+<Step number={1} title="安装依赖">
 
 使用您喜欢的包管理器安装必要的包：
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` 标志是可选的。如果您是 AI 代理，请使用 `intlayer-cli init`。
+
+> 该命令将检测您的环境并安装所需的软件包。例如：
+
 ```bash packageManager="npm"
 npm install intlayer next-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer next-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer next-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer next-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -129,7 +168,9 @@ bun x intlayer init
 
   将 Intlayer 与 Next.js 集成的包。它提供了 Next.js 国际化的上下文提供者和钩子。此外，还包含用于将 Intlayer 集成到 [Webpack](https://webpack.js.org/) 或 [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack) 的 Next.js 插件，以及用于检测用户首选语言环境、管理 Cookie 和处理 URL 重定向的中间件。
 
-### 第2步：配置您的项目
+</Step>
+
+<Step number={2} title="配置您的项目">
 
 创建一个配置文件以定义您的应用程序支持的语言：
 
@@ -153,7 +194,9 @@ export default config;
 
 > 通过此配置文件，您可以设置本地化的 URL、中间件重定向、Cookie 名称、内容声明的位置和扩展名、禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
 
-### 第 3 步：将 Intlayer 集成到 Next.js 配置中
+</Step>
+
+<Step number={3} title="将 Intlayer 集成到 Next.js 配置中">
 
 修改您的 Next.js 配置以集成 Intlayer：
 
@@ -170,7 +213,9 @@ export default withIntlayer(nextConfig);
 
 > `withIntlayer()` Next.js 插件用于将 Intlayer 集成到 Next.js 中。它确保内容声明文件的构建，并在开发模式下监视这些文件。它在 [Webpack](https://webpack.js.org/) 或 [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack) 环境中定义 Intlayer 环境变量。此外，它提供别名以优化性能，并确保与服务器组件的兼容性。
 
-### 第四步：配置中间件以检测语言环境
+</Step>
+
+<Step number={4} title="配置中间件以检测语言环境">
 
 设置中间件以自动检测并处理用户的首选语言环境：
 
@@ -185,7 +230,9 @@ export const config = {
 
 > 调整 `matcher` 参数以匹配您的应用程序路由。更多详情，请参阅 [Next.js 关于配置 matcher 的文档](https://nextjs.org/docs/app/building-your-application/routing/middleware)。
 
-### 第5步：定义动态本地化路由
+</Step>
+
+<Step number={5} title="定义动态本地化路由">
 
 实现动态路由，根据用户的语言环境提供本地化内容。
 
@@ -344,7 +391,9 @@ export const getStaticPaths: GetStaticPaths = () => {
 
 > `getStaticPaths` 和 `getStaticProps` 确保您的应用程序在 Next.js 页面路由中预构建所有本地化所需的页面。此方法减少了运行时计算，从而提升用户体验。更多详情，请参阅 Next.js 文档中的 [`getStaticPaths`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths) 和 [`getStaticProps`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props)。
 
-### 第6步：声明您的内容
+</Step>
+
+<Step number={6} title="声明您的内容">
 
 创建并管理您的内容声明以存储翻译。
 
@@ -396,7 +445,9 @@ export default homeContent;
 
 有关声明内容的更多信息，请参阅[内容声明指南](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
 
-### 第7步：在代码中使用内容
+</Step>
+
+<Step number={7} title="在代码中使用内容">
 
 在整个应用程序中访问您的内容字典以显示翻译内容。
 
@@ -465,6 +516,8 @@ const ComponentExample = () => {
 
 <Steps>
 
+</Step>
+
 <Step number={8} title="元数据的国际化">
 
 如果您想要国际化您的元数据，例如页面标题，可以使用 Next.js 页面路由器提供的 `getStaticProps` 函数。在该函数内部，您可以通过 `getIntlayer` 函数获取内容以翻译您的元数据。

package/docs/zh/intlayer_with_nuxt.md

@@ -27,6 +27,7 @@ history:
   - version: 5.5.10
     date: 2025-06-29
     changes: "初始化历史记录"
+author: aymericzip
 ---
 
 # 使用 Intlayer 翻译您的 Nuxt 和 Vue 网站 | 国际化 (i18n)
@@ -69,152 +70,6 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 
 ---
 
-## 在 Nuxt 应用中设置 Intlayer 的分步指南
-
-<Tabs defaultTab="video">
-  <Tab label="视频" value="video">
-  
-<iframe title="如何使用 Intlayer 翻译你的 Nuxt 和 Vue 应用？探索 Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/nhUcUAVQ6eQ?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
-
-  </Tab>
-  <Tab label="代码" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-nuxt-4-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="演示 CodeSandbox - 如何使用 Intlayer 实现应用国际化"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="演示" value="demo">
-
-<iframe
-  src="https://intlayer-nuxt-4-template.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="演示 - intlayer-nuxt-4-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-### 第一步：安装依赖
-
-查看 GitHub 上的[应用模板](https://github.com/aymericzip/intlayer-nuxt-4-template)。
-
-使用 npm 安装必要的包：
-
-```bash packageManager="npm"
-npm install intlayer vue-intlayer
-npm install --save-dev nuxt-intlayer
-npx intlayer init
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer vue-intlayer
-pnpm add --save-dev nuxt-intlayer
-pnpm intlayer init
-```
-
-```bash packageManager="yarn"
-yarn add intlayer vue-intlayer
-yarn add --save-dev nuxt-intlayer
-yarn intlayer init
-```
-
-```bash packageManager="bun"
-bun add intlayer vue-intlayer
-bun add --dev nuxt-intlayer
-bun x intlayer init
-```
-
-- **intlayer**
-
-  核心包，提供国际化工具，用于配置管理、翻译、[内容声明](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)、转译以及[CLI命令](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/index.md)。
-
-- **vue-intlayer**
-  将 Intlayer 集成到 Vue 应用中的包。它提供了 Vue 组件的组合式函数。
-
-- **nuxt-intlayer**
-  集成 Intlayer 与 Nuxt 应用的 Nuxt 模块。它提供自动设置、用于语言环境检测的中间件、Cookie 管理和 URL 重定向。
-
-### 第2步：配置您的项目
-
-创建一个配置文件来配置您应用的语言：
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // 您的其他语言环境
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-> 通过此配置文件，您可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名，禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
-
-### 第三步：在您的 Nuxt 配置中集成 Intlayer
-
-将 intlayer 模块添加到您的 Nuxt 配置中：
-
-```typescript fileName="nuxt.config.ts"
-import { defineNuxtConfig } from "nuxt/config";
-
-export default defineNuxtConfig({
-  // ... 您现有的 Nuxt 配置
-  modules: ["nuxt-intlayer"],
-});
-```
-
-> `nuxt-intlayer` 模块会自动处理 Intlayer 与 Nuxt 的集成。它设置内容声明的构建，监控开发模式下的文件，提供用于语言环境检测的中间件，并管理本地化路由。
-
-### 第4步：声明您的内容
-
-创建并管理您的内容声明以存储翻译：
-
-```tsx fileName="content/home-page.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
-import { type Dictionary, t } from "intlayer";
-
-const content = {
-  key: "home-page",
-  content: {
-    title: t({
-      en: "Hello world",
-      fr: "Bonjour le monde",
-      es: "Hola mundo",
-    }),
-    metaTitle: t({
-      en: "Welcome | My Application",
-      fr: "Bienvenue | Mon Application",
-      es: "Bienvenido | Mi Aplicación",
-    }),
-    metaDescription: t({
-      en: "Discover your multilingual Nuxt app homepage powered by Intlayer.",
-      fr: "Découvrez la page d'accueil multilingue de votre application Nuxt propulsée par Intlayer.",
-      es: "Descubre la página de inicio multilingüe de tu aplicación Nuxt impulsada por Intlayer.",
-    }),
-  },
-} satisfies Dictionary;
-
-export default content;
-```
-
-> 您的内容声明可以定义在应用程序中的任何位置，只要它们包含在 `contentDir` 目录中（默认是 `./src`），并且匹配内容声明文件扩展名（默认是 `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`）。
-
-> 更多详情，请参阅[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
-
 ### 第5步：在代码中使用 Intlayer
 
 在整个 Nuxt 应用中使用 `useIntlayer` 组合式函数访问您的内容字典：
@@ -577,9 +432,7 @@ export default aboutPageContent;
 
 </Step>
 
-</Steps>
-
-### （可选）步骤 6b：创建带导航的布局
+<Step number="6b" title="创建带导航的布局" isOptional={true}>
 
 Nuxt 布局允许您为页面定义一个通用结构。创建一个包含语言切换器和导航的默认布局：
 
@@ -606,6 +459,10 @@ import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
 
 `Links` 组件（如下所示）确保内部导航链接会自动本地化。
 
+</Step>
+
+</Steps>
+
 ### Git 配置
 
 建议忽略 Intlayer 生成的文件。这样可以避免将它们提交到您的 Git 仓库中。