如何使用next-intl遍历JSON翻译数据实现站点自动化翻译？

你遇到的问题核心是：useTranslations返回的是翻译函数，不是直接的数组对象，所以直接调用map必然失败。

要遍历JSON里的数组型翻译内容，推荐用next-intl提供的useMessages钩子，它能获取当前语言的完整翻译消息对象，直接访问Navigation数组即可：

import { useMessages } from "next-intl";

const NavBar = () => {
  const messages = useMessages();
  const navigation = messages.Navigation;

  // 遍历数组并输出text（对应你期望的Home/Contact）
  navigation.forEach(nav => console.log(nav.text));
  
  // 如果是渲染导航组件，写法如下
  return (
    <nav>
      {navigation.map((nav) => (
        <a key={nav.path} href={nav.path}>
          {nav.text}
        </a>
      ))}
    </nav>
  );
};

export default NavBar;

如果一定要用useTranslations，也可以通过索引逐个访问数组元素，但这种方式繁琐且依赖内部属性，不推荐：

import { useTranslations } from "next-intl";

const NavBar = () => {
  const t = useTranslations("Navigation");
  // 通过_raw属性获取数组长度（注意这是内部属性，可能随版本变化）
  const navCount = t._raw.length;
  
  for (let i = 0; i < navCount; i++) {
    console.log(t(`${i}.text`));
  }
};

总之，用useMessages直接获取翻译对象是最直观的方案，完全不需要逐行处理JSON，直接按对象属性+数组的方式遍历即可。

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