Next.js 14动态嵌套路由如何实现翻译？已用多国际化工具包

一、结合现有i18n工具的动态内容处理 #

基于你已经在用的next-intl、react-i18next和next-i18n-router，针对API返回的动态博客内容，有几种可行的配置方式：

1. 后端返回多语言内容（最优解） #

如果API服务在你的可控范围内，直接让后端为每篇博客存储多语言版本的内容。前端请求时，通过next-i18n-router提供的当前locale参数（比如zh-CN、en-US）作为请求参数传给API，后端返回对应语言的博客内容。这种方式无需前端额外处理翻译逻辑，直接渲染即可，和静态页面的体验一致。

示例请求：

// 基于next.js的服务器组件请求示例
const res = await fetch(`/api/posts/${postId}?locale=${locale}`);
const post = await res.json();

2. 前端动态注入翻译资源 #

如果后端只能返回单一语言的原文（比如英文），可以通过react-i18next的addResourceBundle方法，将动态获取到的博客翻译内容注入到i18n实例中，之后用t函数调用翻译。

import { useTranslation, useEffect } from 'react-i18next';

export default function BlogPost({ post, postTranslations }) {
  const { t, i18n } = useTranslation();

  useEffect(() => {
    // 将当前博客的翻译内容添加到posts命名空间
    if (postTranslations) {
      i18n.addResourceBundle(
        i18n.language,
        'posts',
        { [post.id]: postTranslations },
        true, // 合并现有资源
        true // 深度合并
      );
    }
  }, [post.id, postTranslations, i18n]);

  return (
    <div className="blog-post">
      <h1>{t(`posts.${post.id}.title`)}</h1>
      <div dangerouslySetInnerHTML={{ __html: t(`posts.${post.id}.content`) }} />
    </div>
  );
}

3. next-intl动态加载消息 #

next-intl支持动态传入消息资源，你可以在页面加载时单独获取当前博客的翻译内容，和静态消息合并使用：

import { getTranslations } from 'next-intl';
import { getPost, getPostTranslations } from '@/lib/api';

export async function generateMetadata({ params: { locale, postId } }) {
  const postTranslations = await getPostTranslations(postId, locale);
  const t = await getTranslations({ messages: postTranslations });
  return { title: t('title') };
}

export default async function BlogPost({ params: { locale, postId } }) {
  const post = await getPost(postId);
  const postTranslations = await getPostTranslations(postId, locale);
  const t = await getTranslations({
    namespace: 'posts',
    messages: { [postId]: postTranslations }
  });

  return (
    <article>
      <h1>{t(`${postId}.title`)}</h1>
      <div>{t(`${postId}.content`)}</div>
    </article>
  );
}

二、用免费工具实现动态页面翻译 #

可以借助以下免费/低成本工具实现动态内容的自动翻译：

1. 谷歌翻译API（免费额度） #

谷歌翻译API提供免费试用额度，超出后按调用量计费。你可以在后端层面对API返回的博客原文进行翻译，再返回给前端；如果用前端调用，注意通过后端代理请求，避免暴露API密钥。

2. LibreTranslate（开源免费） #

这是一款开源的翻译工具，你可以自己部署私有实例，也可以使用公共服务（有调用频率限制）。它提供REST API接口，支持多种语言互译，适合个人或小流量项目使用。

3. 网页端自动翻译嵌入 #

如果不需要精细化控制，也可以直接使用谷歌翻译的网页嵌入功能，在页面添加翻译按钮，让用户手动触发整页翻译。但这种方式会翻译整个页面，可能影响样式，且翻译质量依赖自动翻译引擎。

注意事项 #

• 翻译缓存：将已翻译的内容存储到数据库或缓存中，避免重复调用翻译API，节省成本和提升性能。
• 质量校验：自动翻译的质量有限，对于重要的博客内容，建议人工校对后再存储。

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