mcpField
I
intlayer-next-js

intlayer-next-js

github.com/aymericzip开发539 次安装4 周前更新
代码仓库

关于 intlayer-next-js

intlayer-next-js 是面向 Next.js 项目的 Intlayer 使用指南技能，适用于实现多语言内容的开发者。它强调将内容字典放在使用它的组件旁，并分别说明 Server Components 与 Client Components 的接入方式。

主要功能

  1. 01组件旁声明翻译内容
  2. 02通过 t() 定义字典
  3. 03Server Components 接入方式
  4. 04Client Components 接入方式
  5. 05覆盖 Next.js 14 与 15

适用场景

  1. 01为 Next.js 组件创建翻译内容
  2. 02在服务端组件中读取本地化内容
  3. 03在客户端组件中使用 useIntlayer
  4. 04为 Next.js 项目配置 Intlayer

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/aymericzip/intlayer-skills --skill intlayer-next-js

安装后在 Claude Code 中输入/intlayer-next-js确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENCE.md
references/
environment_nextjs_14.md
environment_nextjs_15.md
environment_nextjs_next-with-page-router.md
environment_nextjs_no-locale-path.md
environment_nextjs.md
packages_intlayer_exports.md
packages_next-intlayer_exports.md
packages_next-intlayer_intlayerMiddleware.md
packages_next-intlayer_t.md
packages_next-intlayer_useDictionary.md
packages_next-intlayer_useIntlayer.md
packages_next-intlayer_useLocale.md

详细介绍

Intlayer Next.js 用法

核心理念

Intlayer 倡导组件级内容声明。内容不是定义在一个庞大的全局翻译文件中，而是声明在与使用这些内容的 Next.js 组件相邻的 *.content.ts 文件中。

工作流

要创建已翻译的组件，需要两个文件：

  1. **声明：**内容文件（例如 myComponent.content.ts），用于定义字典。
  2. **实现：**使用 useIntlayer 钩子的 Next.js 组件（服务端或客户端）。
1. 声明内容

创建内容文件，并使用 t() 进行翻译。 文件：src/components/MyComponent/myComponent.content.ts

import { t, type Dictionary } from "intlayer";

const content = {
  // The 'key' must be unique and matches what you pass to useIntlayer()
  key: "my-component",
  content: {
    text: t({
      en: "Welcome",
      fr: "Bienvenue",
      es: "Hola",
    }),
  },
} satisfies Dictionary;

export default content;

设置

服务端组件

要在服务端组件中使用 Intlayer，请使用 IntlayerServerProvider 提供区域设置，并使用 next-intlayer/server 中的 useIntlayer。

import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";

const MyServerComponent = () => {
  const content = useIntlayer("my-component");
  return (
    <div>
      <h1>{content.text}</h1>
    </div>
  );
};

const Page = async ({ params }) => {
  const { locale } = await params;
  return (
    <IntlayerServerProvider locale={locale}>
      <MyServerComponent />
    </IntlayerServerProvider>
  );
};

export default Page;

客户端组件

对于客户端组件，添加 "use client" 指令，并使用 next-intlayer 中的 useIntlayer。确保组件由 IntlayerClientProvider 包裹。

"use client";

import { useIntlayer } from "next-intlayer";

export const MyClientComponent = () => {
  const content = useIntlayer("my-component");

  return (
    <div>
      <h1>{content.text}</h1>
    </div>
  );
};

Next.js 包文档

参考

环境
软件包

评论

支持 Markdown