接收有关即将发布的Intlayer的通知
    Creation:2025-10-25Last update:2025-10-26

    使用 Intlayer 翻译您的 Next.js 16 网站 | 国际化 (i18n)

    请查看 GitHub 上的应用模板。

    目录

    什么是 Intlayer？

    Intlayer 是一个创新的开源国际化（i18n）库，旨在简化现代 Web 应用中的多语言支持。Intlayer 无缝集成了最新的 Next.js 16 框架，包括其强大的 App Router。它针对 Server Components 进行了优化，以实现高效渲染，并且完全兼容 Turbopack。

    使用 Intlayer，您可以：

    • 通过组件级声明式字典轻松管理翻译。
    • 动态本地化元数据、路由和内容。
    • 在客户端和服务器端组件中访问翻译。
    • 确保 TypeScript 支持，通过自动生成类型，提升自动补全和错误检测能力。
    • 享受高级功能，如动态语言环境检测和切换。
    Intlayer 兼容 Next.js 12、13、14 和 16。如果您使用的是 Next.js Page Router，可以参考此指南。对于使用 App Router 的 Next.js 12、13、14，请参考此指南。

    在 Next.js 应用中逐步设置 Intlayer 指南

    第一步：安装依赖

    使用 npm 安装必要的包：

    npm install intlayer next-intlayer

    集成 Intlayer 与 Next.js 的包。它为 Next.js 国际化提供上下文提供者和钩子。此外，它还包括用于将 Intlayer 集成到 Webpack 或 Turbopack 的 Next.js 插件，以及用于检测用户首选语言环境、管理 Cookie 和处理 URL 重定向的代理。

    第 2 步：配置您的项目

    创建一个配置文件来配置您的应用程序语言：

    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;
    通过此配置文件，您可以设置本地化 URL、代理重定向、cookie 名称、内容声明的位置和扩展名，禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅配置文档。

    第三步：在 Next.js 配置中集成 Intlayer

    配置您的 Next.js 设置以使用 Intlayer：

    next.config.ts
    import type { NextConfig } from "next";import { withIntlayer } from "next-intlayer/server";const nextConfig: NextConfig = {  /* 这里是配置选项 */};export default withIntlayer(nextConfig);
    withIntlayer() 是用于将 Intlayer 集成到 Next.js 的插件。它确保内容声明文件的构建，并在开发模式下进行监控。它在 Webpack 或 Turbopack 环境中定义 Intlayer 环境变量。此外，它还提供别名以优化性能，并确保与服务器组件的兼容性。

    withIntlayer() 函数是一个 Promise 函数。它允许在构建开始之前准备 Intlayer 字典。如果你想与其他插件一起使用它，可以使用 await。示例：

    const nextConfig = await withIntlayer(nextConfig);const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);export default nextConfigWithOtherPlugins;

    如果你想同步使用它，可以使用 withIntlayerSync() 函数。示例：

    const nextConfig = withIntlayerSync(nextConfig);const nextConfigWithOtherPlugins = withOtherPlugins(nextConfig);export default nextConfigWithOtherPlugins;

    第4步：定义动态语言环境路由

    删除 RootLayout 中的所有内容，并替换为以下代码：

    src/app/layout.tsx
    import type { PropsWithChildren, FC } from "react";import "./globals.css";const RootLayout: FC<PropsWithChildren> = ({ children }) => (  // 你仍然可以用其他提供者包裹 children，比如 `next-themes`、`react-query`、`framer-motion` 等。  <>{children}</>);export default RootLayout;
    保持 RootLayout 组件为空允许设置 <html> 标签的 lang 和 dir 属性。

    要实现动态路由，通过在 [locale] 目录中添加新的布局来提供语言环境路径：

    src/app/[locale]/layout.tsx
    import type { NextLayoutIntlayer } from "next-intlayer";import { Inter } from "next/font/google";import { getHTMLTextDir } from "intlayer";const inter = Inter({ subsets: ["latin"] });const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {  const { locale } = await params;  return (> 保持 `RootLayout` 组件为空，允许将 [`lang`](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/lang) 和 [`dir`](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/dir) 属性设置到 `<html>` 标签上。要实现动态路由，通过在你的 `[locale]` 目录中添加一个新的布局来提供本地化路径：```tsx fileName="src/app/[locale]/layout.tsx" codeFormat="typescript"import type { NextLayoutIntlayer } from "next-intlayer";import { Inter } from "next/font/google";import { getHTMLTextDir } from "intlayer";const inter = Inter({ subsets: ["latin"] });const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {  const { locale } = await params;  return (    <html lang={locale} dir={getHTMLTextDir(locale)}>      <body className={inter.className}>{children}</body>    </html>  );};export default LocaleLayout;
    [locale] 路径段用于定义语言环境。例如：/en-US/about 指向 en-US，/fr/about 指向 fr。

    const inter = Inter({ subsets: ["latin"] });

    const LocaleLayout = async ({ children, params: { locale } }) => { const { locale } = await params; return (

    {children}

    ); };

    module.exports = LocaleLayout;

    > `[locale]` 路径段用于定义语言环境。例如：`/en-US/about` 指向 `en-US`，`/fr/about` 指向 `fr`。> 在此阶段，您将遇到错误：`Error: Missing <html> and <body> tags in the root layout.`。这是预期的，因为 `/app/page.tsx` 文件不再使用，可以删除。取而代之的是，`[locale]` 路径段将激活 `/app/[locale]/page.tsx` 页面。因此，页面将可以通过浏览器中的 `/en`、`/fr`、`/es` 等路径访问。要将默认语言设置为根页面，请参阅第7步中的 `proxy` 配置。然后，在您的应用布局中实现 `generateStaticParams` 函数。```tsx {1} fileName="src/app/[locale]/layout.tsx" codeFormat="typescript"export { generateStaticParams } from "next-intlayer"; // 插入的代码行const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {  /*... 其余代码 */};export default LocaleLayout;
    generateStaticParams 确保您的应用程序为所有语言预构建必要的页面，从而减少运行时计算并提升用户体验。更多详情，请参阅 Next.js 关于 generateStaticParams 的文档。
    Intlayer 配合 export const dynamic = 'force-static'; 使用，以确保所有语言的页面均被预构建。

    第5步：声明您的内容

    创建并管理您的内容声明以存储翻译：

    src/app/[locale]/page.content.ts
    import { t, type Dictionary } from "intlayer";const pageContent = {  key: "page",  content: {    getStarted: {      main: t({        en: "Get started by editing",        fr: "Commencez par éditer",        es: "Comience por editar",      }),      pageLink: "src/app/page.tsx",    },  },} satisfies Dictionary;export default pageContent;
    您的内容声明可以定义在应用程序的任何位置，只要它们被包含在 contentDir 目录中（默认是 ./src）。并且文件扩展名需匹配内容声明文件扩展名（默认是 .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}）。
    更多详情，请参考内容声明文档。

    第6步：在代码中使用内容

    在整个应用程序中访问您的内容字典：

    src/app/[locale]/page.tsx
    import type { FC } from "react";import { ClientComponentExample } from "@components/ClientComponentExample";import { ServerComponentExample } from "@components/ServerComponentExample";import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";const PageContent: FC = () => {  const content = useIntlayer("page");  return (    <>      <p>{content.getStarted.main}</p> {/* 使用内容字典中的主要介绍文本 */}      <code>{content.getStarted.pageLink}</code> {/* 显示页面链接内容 */}    </>  );};const Page: NextPageIntlayer = async ({ params }) => {  const { locale } = await params;  return (    <IntlayerServerProvider locale={locale}>      <PageContent />      <ServerComponentExample />      <IntlayerClientProvider locale={locale}>        <ClientComponentExample />      </IntlayerClientProvider>    </IntlayerServerProvider>  );};export default Page;
    • IntlayerClientProvider 用于为客户端组件提供语言环境。它可以放置在任何父组件中，包括布局组件中。然而，推荐将其放置在布局中，因为 Next.js 会在页面之间共享布局代码，这样更高效。通过在布局中使用 IntlayerClientProvider，可以避免每个页面都重新初始化它，从而提升性能并在整个应用中保持一致的本地化上下文。
    • IntlayerServerProvider 用于为服务器端子组件提供语言环境。它不能设置在布局中。
    布局和页面不能共享公共的服务器上下文，因为服务器上下文系统基于每次请求的数据存储（通过 React 的缓存 机制），这导致每个“上下文”会为应用程序的不同部分重新创建。在共享布局中放置提供者会破坏这种隔离，阻止服务器上下文值正确传播到你的服务器组件。
    src/components/ClientComponentExample.tsx
    "use client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";export const ClientComponentExample: FC = () => {  const content = useIntlayer("client-component-example"); // 创建相关内容声明  return (    <div>      <h2>{content.title}</h2>      <p>{content.content}</p>    </div>  );};
    src/components/ServerComponentExample.tsx
    import type { FC } from "react";import { useIntlayer } from "next-intlayer/server";export const ServerComponentExample: FC = () => {  const content = useIntlayer("server-component-example"); // 创建相关内容声明  return (    <div>      <h2>{content.title}</h2>      <p>{content.content}</p>    </div>  );};
    如果您想在字符串属性中使用内容，例如 alt、title、href、aria-label 等，必须调用函数的值，如：
    <img src={content.image.src.value} alt={content.image.value} />
    要了解有关 useIntlayer 钩子的更多信息，请参阅文档。

    （可选）步骤 7：配置用于语言环境检测的代理

    设置代理以检测用户的首选语言环境：

    src/proxy.ts
    export { intlayerProxy as proxy } from "next-intlayer/proxy";export const config = {  matcher:    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",};
    intlayerProxy 用于检测用户的首选语言环境，并根据配置将用户重定向到相应的 URL。此外，它还支持将用户的首选语言环境保存在 cookie 中。
    如果您需要将多个代理串联使用（例如，将 intlayerProxy 与身份验证或自定义代理一起使用），Intlayer 现在提供了一个名为 multipleProxies 的辅助工具。
    import { multipleProxies, intlayerProxy } from "next-intlayer/proxy";import { customProxy } from "@utils/customProxy";export const proxy = multipleProxies([intlayerProxy, customProxy]);

    （可选）步骤 8：元数据的国际化

    如果您想要对元数据进行国际化，比如页面标题，可以使用 Next.js 提供的 generateMetadata 函数。在其中，您可以通过 getIntlayer 函数获取内容来翻译您的元数据。

    src/app/[locale]/metadata.content.ts
    import { type Dictionary, t } from "intlayer";import { Metadata } from "next";const metadataContent = {  key: "page-metadata",  content: {    title: t({      en: "Create Next App",      fr: "Créer une application Next.js",      es: "Crear una aplicación Next.js",    }),    description: t({      zh: "由 create next app 生成",      en: "Generated by create next app",      fr: "Généré par create next app",      es: "Generado por create next app",    }),  },} satisfies Dictionary<Metadata>;export default metadataContent;
    src/app/[locale]/layout.tsx or src/app/[locale]/page.tsx
    import { getIntlayer, getMultilingualUrls } from "intlayer";import type { Metadata } from "next";import type { LocalPromiseParams } from "next-intlayer";export const generateMetadata = async ({  params,}: LocalPromiseParams): Promise<Metadata> => {  const { locale } = await params;  const metadata = getIntlayer("page-metadata", locale);  /**   * 生成一个包含每个语言环境所有 URL 的对象。   *   * 示例：   * ```ts   *  getMultilingualUrls('/about');   *   *  // 返回   *  // {   *  //   en: '/about',   *  //   fr: '/fr/about',   *  //   es: '/es/about',   *  // }   * ```   */  const multilingualUrls = getMultilingualUrls("/");  const localizedUrl =    multilingualUrls[locale as keyof typeof multilingualUrls];  return {    ...metadata,    alternates: {      canonical: localizedUrl,      languages: { ...multilingualUrls, "x-default": "/" },    },    openGraph: {      url: localizedUrl,    },  };};// ... 其余代码
    注意，从 next-intlayer 导入的 getIntlayer 函数会将您的内容包装在一个 IntlayerNode 中，从而允许与可视化编辑器集成。相比之下，从 intlayer 导入的 getIntlayer 函数则直接返回您的内容，不带额外属性。

    或者，您可以使用 getTranslation 函数来声明您的元数据。然而，建议使用内容声明文件，以便在某个阶段自动翻译您的元数据并将内容外部化。

    src/app/[locale]/layout.tsx or src/app/[locale]/page.tsx
    import {  type IConfigLocales,  getTranslation,  getMultilingualUrls,} from "intlayer";import type { Metadata } from "next";import type { LocalPromiseParams } from "next-intlayer";export const generateMetadata = async ({  params,}: LocalPromiseParams): Promise<Metadata> => {  const { locale } = await params;  const t = <T>(content: IConfigLocales<T>) => getTranslation(content, locale);  return {    title: t<string>({      en: "My title",      fr: "Mon titre",      es: "Mi título",    }),    description: t({      en: "我的描述",      fr: "Ma description",      es: "Mi descripción",    }),  };};// ... 代码的其余部分
    了解有关元数据优化的更多信息，请参阅 Next.js 官方文档。

    （可选）步骤 9：国际化您的 sitemap.xml 和 robots.txt

    要实现 sitemap.xml 和 robots.txt 的国际化，您可以使用 Intlayer 提供的 getMultilingualUrls 函数。该函数允许您为站点地图生成多语言 URL。

    src/app/sitemap.ts
    import { getMultilingualUrls } from "intlayer";import type { MetadataRoute } from "next";const sitemap = (): MetadataRoute.Sitemap => [  {    url: "https://example.com",    alternates: {      languages: {        ...getMultilingualUrls("https://example.com"),        "x-default": "https://example.com",      },    },  },  {    url: "https://example.com/login",    alternates: {      languages: {        ...getMultilingualUrls("https://example.com/login"),        "x-default": "https://example.com/login",      },    },  },  {    url: "https://example.com/register",    alternates: {      languages: {        ...getMultilingualUrls("https://example.com/register"),        "x-default": "https://example.com/register",      },    },  },];export default sitemap;
    src/app/robots.ts
    import type { MetadataRoute } from "next";import { getMultilingualUrls } from "intlayer";tsx fileName="src/app/robots.ts" codeFormat="typescript"import type { MetadataRoute } from "next";import { getMultilingualUrls } from "intlayer";// 获取所有多语言版本的 URLconst getAllMultilingualUrls = (urls: string[]) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);const robots = (): MetadataRoute.Robots => ({  rules: {    userAgent: "*", // 适用于所有用户代理    allow: ["/"], // 允许访问根路径    disallow: getAllMultilingualUrls(["/login", "/register"]), // 禁止访问登录和注册页面的所有语言版本  },  host: "https://example.com",  sitemap: `https://example.com/sitemap.xml`,});export default robots;
    了解有关站点地图优化的更多信息，请参阅官方 Next.js 文档。了解有关 robots.txt 优化的更多信息，请参阅官方 Next.js 文档。

    （可选）步骤 10：更改内容语言

    在 Next.js 中更改内容语言，推荐的方式是使用 Link 组件将用户重定向到相应的本地化页面。Link 组件支持页面预加载，有助于避免完整页面重新加载。

    src/components/LocaleSwitcher.tsx
    "use client";import type { FC } from "react";import {  Locales,  getHTMLTextDir,  getLocaleName,  getLocalizedUrl,} from "intlayer";import { useLocale } from "next-intlayer";import Link from "next/link";export const LocaleSwitcher: FC = () => {  const { locale, pathWithoutLocale, availableLocales, setLocale } =    useLocale();  return (    <div>      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>      <div id="localePopover" popover="auto">        {availableLocales.map((localeItem) => (          <Link            href={getLocalizedUrl(pathWithoutLocale, localeItem)}            key={localeItem}            aria-current={locale === localeItem ? "page" : undefined}            onClick={() => setLocale(localeItem)}            replace // 将确保“后退”浏览器按钮会重定向到前一个页面          >            <span>              {/* 语言环境 - 例如 FR */}              {localeItem}            </span>            <span>              {/* 该语言环境中的语言名称 - 例如 Français */}              {getLocaleName(localeItem, locale)}            </span>            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>              {/* 当前语言环境中的语言名称 - 例如当当前语言环境设置为 Locales.SPANISH 时显示 Francés */}              {getLocaleName(localeItem)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* 英文中的语言名称 - 例如 French */}              {getLocaleName(localeItem, Locales.ENGLISH)}            </span>          </Link>        ))}      </div>    </div>  );};
    另一种方法是使用 useLocale 钩子提供的 setLocale 函数。该函数不支持页面预取。更多详情请参阅 useLocale 钩子文档。
    你也可以在 onLocaleChange 选项中设置一个函数，以在语言环境变化时触发自定义函数。
    src/components/LocaleSwitcher.tsx
    "use client";import { useRouter } from "next/navigation";import { useLocale } from "next-intlayer";import { getLocalizedUrl } from "intlayer";// ... 其余代码const router = useRouter();const { setLocale } = useLocale({  onLocaleChange: (locale) => {    router.push(getLocalizedUrl(pathWithoutLocale, locale));  },});return <button onClick={() => setLocale(Locales.FRENCH)}>切换到法语</button>;

    文档参考：

    （可选）步骤 11：创建本地化链接组件

    为了确保您的应用程序导航遵循当前的语言环境，您可以创建一个自定义的 Link 组件。该组件会自动在内部 URL 前添加当前语言的前缀。例如，当讲法语的用户点击“关于”页面的链接时，他们会被重定向到 /fr/about，而不是 /about。

    这种行为有几个好处：

    • SEO 和用户体验：本地化的 URL 有助于搜索引擎正确索引特定语言的页面，并为用户提供其偏好的语言内容。
    • 一致性：通过在整个应用程序中使用本地化链接，您可以确保导航始终保持在当前语言环境内，防止意外的语言切换。
    • 可维护性：将本地化逻辑集中在单个组件中简化了 URL 的管理，使您的代码库更易于维护和扩展，随着应用程序的增长。

    下面是一个使用 TypeScript 实现的本地化 Link 组件示例：

    src/components/Link.tsx
    "use client";import { getLocalizedUrl } from "intlayer";import NextLink, { type LinkProps as NextLinkProps } from "next/link";import { useLocale } from "next-intlayer";import type { PropsWithChildren, FC } from "react";/** * 工具函数，用于检查给定的 URL 是否为外部链接。 * 如果 URL 以 http:// 或 https:// 开头，则视为外部链接。 */export const checkIsExternalLink = (href?: string): boolean =>  /^https?:\/\//.test(href ?? "");/** * 一个自定义的 Link 组件，根据当前语言环境调整 href 属性。 * 对于内部链接，使用 `getLocalizedUrl` 在 URL 前加上语言前缀（例如 /fr/about）。 * 这样可以确保导航保持在相同的语言环境上下文中。 */export const Link: FC<PropsWithChildren<NextLinkProps>> = ({  href,  children,  ...props}) => {  const { locale } = useLocale();  const isExternalLink = checkIsExternalLink(href.toString());  // 如果链接是内部链接且 href 有效，则获取本地化的 URL。  const hrefI18n: NextLinkProps["href"] =    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;  return (    <NextLink href={hrefI18n} {...props}>      {children}    </NextLink>  );};

    工作原理

    • 检测外部链接：
      辅助函数 checkIsExternalLink 用于判断一个 URL 是否为外部链接。外部链接保持不变，因为它们不需要本地化。

    • 获取当前语言环境：
      useLocale 钩子提供当前的语言环境（例如，法语为 fr）。

    • 本地化 URL：
      对于内部链接（即非外部链接），使用 getLocalizedUrl 自动在 URL 前添加当前语言环境前缀。这意味着如果用户使用的是法语，传入的 /about 会被转换为 /fr/about。

    • 返回链接：
      组件返回带有本地化 URL 的 <a> 元素，确保导航与当前语言环境保持一致。

    通过在您的应用程序中集成此 Link 组件，您可以保持一致且具语言感知的用户体验，同时还可提升 SEO 和可用性。

    （可选）步骤 12：在服务器操作中获取当前语言环境

    如果您需要在服务器操作中获取活动语言环境（例如，用于本地化电子邮件或执行语言感知逻辑），请从 next-intlayer/server 调用 getLocale：

    src/app/actions/getLocale.ts
    "use server";import { getLocale } from "next-intlayer/server";export const myServerAction = async () => {  const locale = await getLocale();  // 使用该语言环境执行某些操作};

    getLocale 函数遵循级联策略来确定用户的语言环境：

    1. 首先，它会检查请求头中是否有代理可能设置的语言环境值
    2. 如果请求头中没有找到语言环境，则查找存储在 Cookie 中的语言环境
    3. 如果没有找到 Cookie，则尝试从用户的浏览器设置中检测其首选语言
    4. 最后，作为最后手段，它会回退到应用程序配置的默认语言环境

    这确保了根据可用的上下文选择最合适的语言环境。

    （可选）步骤 13：优化你的包大小

    使用 next-intlayer 时，字典默认会包含在每个页面的打包文件中。为了优化打包体积，Intlayer 提供了一个可选的 SWC 插件，该插件通过宏智能地替换 useIntlayer 调用。这确保字典只包含在实际使用它们的页面的打包文件中。

    要启用此优化，请安装 @intlayer/swc 包。安装完成后，next-intlayer 会自动检测并使用该插件：

    npm install @intlayer/swc --save-dev
    注意：此优化仅适用于 Next.js 13 及以上版本。
    注意：此包默认未安装，因为 SWC 插件在 Next.js 中仍处于实验阶段，未来可能会有所变化。

    在 Turbopack 上监视字典更改

    当使用 Turbopack 作为开发服务器并通过 next dev 命令启动时，默认情况下不会自动检测字典的更改。

    此限制的原因是 Turbopack 无法并行运行 webpack 插件来监视内容文件的更改。为了解决此问题，您需要使用 intlayer watch 命令，同时运行开发服务器和 Intlayer 构建监视器。

    package.json
    {  // ... 您现有的 package.json 配置  "scripts": {    // ... 您现有的脚本配置    "dev": "intlayer watch --with 'next dev'",  },}
    如果您使用的是 next-intlayer@<=6.x.x，您需要保留 --turbopack 标志，以使 Next.js 16 应用程序能够正确地与 Turbopack 一起工作。我们建议使用 next-intlayer@>=7.x.x 以避免此限制。

    配置 TypeScript

    Intlayer 使用模块增强来利用 TypeScript 的优势，使您的代码库更强大。

    自动补全

    翻译错误

    确保您的 TypeScript 配置包含自动生成的类型。

    tsconfig.json
    {  // ... 您现有的 TypeScript 配置  "include": [    // ... 您现有的 TypeScript 配置    ".intlayer/**/*.ts", // 包含自动生成的类型  ],}

    Git 配置

    建议忽略 Intlayer 生成的文件，这样可以避免将它们提交到你的 Git 仓库中。

    为此，你可以在 .gitignore 文件中添加以下内容：

    .gitignore
    # 忽略 Intlayer 生成的文件.intlayer

    VS Code 扩展

    为了提升你使用 Intlayer 的开发体验，你可以安装官方的 Intlayer VS Code 扩展。

    从 VS Code 市场安装

    该扩展提供：

    • 翻译键的 自动补全。
    • 缺失翻译的 实时错误检测。
    • 已翻译内容的内联预览。
    • 快速操作，轻松创建和更新翻译。

    有关如何使用该扩展的更多详细信息，请参阅Intlayer VS Code 扩展文档。

    深入了解

    要进一步使用，您可以实现可视化编辑器或使用内容管理系统（CMS）将内容外部化。

    测试
    Next.js 14和应用路由器
    接收有关即将发布的Intlayer的通知