使用next-i18next时，如何从HygraphCMS加载国际化JSON？

最佳实现步骤 #

1. 配置HygraphCMS翻译模型 #

在HygraphCMS中创建Translation内容模型，包含以下核心字段：

• key：字符串类型，作为翻译的唯一标识（如home.title）
• locale：枚举类型，对应你的支持语言（如en、zh-CN）
• value：文本/富文本类型，存储对应语言的翻译内容
  确保每个语言的每个key都有对应的条目，避免翻译缺失。

2. 自定义翻译资源加载逻辑 #

next-i18next默认从文件系统加载翻译，我们需要替换为从HygraphCMS拉取的逻辑，推荐在服务端渲染/静态生成阶段完成请求，避免客户端延迟：

示例（静态生成页面）

在页面的getStaticProps中查询HygraphCMS并转换为i18next兼容的资源结构：

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { gql, request } from 'graphql-request';

// GraphQL查询语句
const GET_TRANSLATIONS = gql`
  query GetTranslations($locale: String!) {
    translations(where: { locale: $locale }) {
      key
      value
    }
  }
`;

export async function getStaticProps({ locale }) {
  // 从HygraphCMS拉取当前语言的翻译数据
  const { translations } = await request(
    process.env.HYGRAPH_API_URL,
    GET_TRANSLATIONS,
    { locale }
  );

  // 转换为i18next需要的{ [locale]: { translation: { key: value } } }结构
  const resources = {
    [locale]: {
      translation: translations.reduce((acc, item) => {
        acc[item.key] = item.value;
        return acc;
      }, {})
    }
  };

  // 合并自定义资源与next-i18next的初始化配置
  const initialI18nStore = await serverSideTranslations(locale, [], { resources });

  return {
    props: { ...initialI18nStore },
    revalidate: 60 // 开启增量静态再生，每60秒自动更新翻译
  };
}

全局初始化（可选）

如果需要全局复用加载逻辑，可以在next-i18next.config.js中扩展后端配置，或者封装自定义的翻译加载函数。

异步请求性能优化方案 #

1. 服务端预加载（优先推荐） #

通过getStaticProps（静态生成）或getServerSideProps（服务端渲染）在服务端完成HygraphCMS请求，将翻译资源与页面内容一起返回给客户端，完全避免客户端额外请求的延迟。

2. 缓存策略 #

• CDN与HTTP缓存：在HygraphCMS请求中设置Cache-Control头（如Cache-Control: s-maxage=3600），让CDN缓存查询结果，减少重复请求到HygraphCMS的次数。
• 内存缓存：在SSR场景下，用lru-cache等工具缓存翻译资源，避免每个请求都重新查询HygraphCMS。
• 客户端缓存：若需动态切换语言，用SWR或React Query缓存客户端请求的翻译数据，切换语言时直接读取缓存。

3. 增量静态再生（ISR） #

在getStaticProps中设置revalidate参数，让页面定期自动更新翻译内容，同时保持静态页面的加载速度，无需全量重新构建项目。

4. 合并GraphQL请求 #

如果页面还有其他HygraphCMS数据需求，将翻译查询与其他查询合并为单个GraphQL请求，减少HTTP请求开销。

5. 优化HygraphCMS查询性能 #

为Translation模型的locale和key字段添加索引，提升大数量级下的查询速度；必要时使用分页或过滤条件减少返回数据量。

额外注意事项 #

• 配置i18next的fallbackLng参数，当当前语言缺失某个翻译key时，自动回退到默认语言：

  // next-i18next.config.js
  module.exports = {
    i18n: {
      defaultLocale: 'en',
      locales: ['en', 'zh-CN'],
      fallbackLng: 'en'
    }
  };
  

• 定期校验HygraphCMS中的翻译条目，避免出现重复key或缺失语言的情况。

内容的提问来源于stack exchange，提问作者Shamoon