Creation:2024-08-11Last update:2026-05-06
将此文档参考到您的 AI 助手ChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
使用您最喜欢的AI助手总结文档，并引用此页面和AI提供商
版本历史
- "更新 Solid useIntlayer API 用法以直接访问属性"v8.9.02026/5/4
- "初始化历史"v5.5.102025/6/29
此页面的内容已使用 AI 翻译。
查看英文原文的最新版本编辑此文档
如果您有改善此文档的想法，请随时通过在GitHub上提交拉取请求来贡献。
文档的 GitHub 链接Copy
复制文档 Markdown 到剪贴板
Next.js 集成：useIntlayer Hook 文档
useIntlayer hook 专为 Next.js 应用设计，用于高效获取和管理本地化内容。本篇文档将重点介绍如何在 Next.js 项目中使用该 hook，确保正确的本地化实践。
在 Next.js 中导入 useIntlayer
根据你是在 Next.js 应用中处理客户端组件还是服务器端组件，可以按如下方式导入 useIntlayer hook：
客户端组件：
typescript复制代码复制代码到剪贴板
import { useIntlayer } from "next-intlayer"; // 用于客户端组件服务器端组件：
tsx复制代码复制代码到剪贴板
import { useIntlayer } from "next-intlayer/server"; // 用于服务器端组件
参数
key：用于检索内容的字典键的字符串标识符。locale（可选）：指定要使用的语言环境。如果省略，hook 会默认使用客户端或服务器上下文中设置的语言环境。
字典文件
确保所有内容键都在内容声明文件中定义，以防止运行时错误并确保类型安全。这种方法还便于 TypeScript 集成，实现编译时验证。
有关设置内容声明文件的说明，请参见此处。
在 Next.js 中的示例用法
以下示例展示了如何在 Next.js 页面中实现 useIntlayer 钩子，根据应用程序当前的语言环境动态加载本地化内容：
src/pages/[locale]/index.tsx
复制代码
复制代码到剪贴板
import { ClientComponentExample } from "@components/ClientComponentExample";
import { ServerComponentExample } from "@components/ServerComponentExample";
import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";
const HomePage: NextPageIntlayer = async ({ params }) => {
const { locale } = await params;
const content = useIntlayer("homepage", locale);
return (
<>
<p>{content.introduction}</p>
<IntlayerClientProvider locale={locale}>
<ClientComponentExample />
</IntlayerClientProvider>
<IntlayerServerProvider locale={locale}>
<ServerComponentExample />
</IntlayerServerProvider>
</>
);
};src/components/ClientComponentExample.tsx
复制代码
复制代码到剪贴板
"use-client";
import type { FC } from "react";
import { useIntlayer } from "next-intlayer";
const ClientComponentExample: FC = () => {
const content = useIntlayer("component-content"); // 使用 useIntlayer 钩子获取组件内容
return (
<div>
<h1>{content.title}</h1> {/* 显示内容标题 */}
<p>{content.description}</p> {/* 显示内容描述 */}
</div>
);
};src/components/ServerComponentExample.tsx
复制代码
复制代码到剪贴板
import type { FC } from "react";
import { useIntlayer } from "next-intlayer/server";
const ServerComponentExample: FC = () => {
const content = useIntlayer("component-content");
return (
<div>
<h1>{content.title}</h1>
<p>{content.description}</p>
</div>
);
};处理属性本地化
要本地化诸如 alt、title、href、aria-label 等属性，请确保正确引用内容：
tsx
复制代码
复制代码到剪贴板
<img src={content.image.src.value} alt={content.image.alt.value} /><img src={content.image.src.toString()} alt={content.image.alt.toString()} /><img src={String(content.image.src)} alt={String(content.image.alt)} />更多信息
- Intlayer 可视化编辑器：了解如何使用可视化编辑器以更轻松地管理内容，请点击这里。
本档说明文档专门介绍了在 Next.js 环境中使用 useIntlayer 钩子，提供了一个强大的解决方案来管理您 Next.js 应用中的本地化内容。