Next.js页面在getStaticProps重验证后翻译异常求助

问题场景 #

在Next.js中使用getStaticProps结合ISR（增量静态再生）实现分类页面多语言翻译时：

• 首次加载页面，数据和翻译均正常显示
• 修改数据库数据并等待10秒重验证后，数据更新正确，但翻译失效（显示share_btn这类key而非实际文本）

核心原因 #

next-i18next默认会缓存翻译资源，ISR重验证过程中未重新加载翻译配置，导致翻译props未正确注入页面。

解决方案 #

1. 完善next-i18next配置 #

在next-i18next.config.js中开启reloadOnPrerender，强制ISR重验证时重新加载翻译资源：

const path = require('path');

module.exports = {
  i18n: {
    locales: ['en', 'zh'], // 替换为你的语言列表
    defaultLocale: 'en',
  },
  localePath: path.resolve('./public/locales'), // 确保指向正确的翻译文件目录
  reloadOnPrerender: true, // 关键配置：开启后每次预渲染（含ISR重验证）都会重新加载翻译
};

2. 优化getStaticProps代码 #

抽离翻译逻辑，避免重复代码，确保locale参数正确传递：

export async function getStaticProps(context) {
  let files = [];
  let error = false;

  try {
    await connect();
    files = await File.find({ category: 'some category', approved: true });
  } catch (e) {
    error = true;
  }

  // 统一获取翻译props
  const translationProps = await serverSideTranslations(
    context.locale,
    ['category', 'home'],
    i18nConfig
  );

  return {
    props: {
      files: JSON.parse(JSON.stringify(files)),
      error,
      ...translationProps,
    },
    revalidate: 10,
  };
}

3. 验证页面组件的翻译使用 #

确保组件中useTranslation钩子的namespace与getStaticProps中指定的一致：

import { useTranslation } from 'next-i18next';

export default function CategoryPage({ files }) {
  // 匹配getStaticProps中的namespace数组
  const { t } = useTranslation(['category', 'home']);

  return (
    <div>
      <h1>{t('category:page_title')}</h1>
      <button>{t('home:share_btn')}</button>
      {/* 渲染数据库数据 */}
      {files.map(file => <div key={file._id}>{file.name}</div>)}
    </div>
  );
}

4. 检查翻译文件结构 #

确保public/locales目录下的文件结构正确，例如：

public/
  locales/
    en/
      category.json
      home.json
    zh/
      category.json
      home.json

每个语言的json文件需包含对应key，比如en/home.json：

{
  "share_btn": "Share"
}

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