如何在next-i18next中用嵌套文件夹组织JSON翻译文件？

环境与现有配置 #

我正在使用Next 12.0与next-i18next: "8.6.0"，当前next-i18next.config.js配置如下：

const path = require('path');

/**
 * When converting this to typescript can import locales from src/c/constants/locales.ts instead of repeating here
 */

module.exports = {
    localePath: path.resolve('./public/static/locales'),
    i18n: {
        localeDetection: false,
        defaultLocale: 'de',
        locales: ['de', 'en'],
        fallbackLng: [],
    },
};

翻译文件放在public/static/locales/en/home.json这类路径下，在getStaticProps中通过以下方式导入：

export async function getStaticProps({
    locale,
}: GetStaticPropsContext): Promise<GetStaticPropsResult<ServerProps>> {
    return {
        props: {
            ...(await serverSideTranslations(locale, ['home']),
        },
    };
}

客户端通过useTranslations('home')可正常使用翻译内容，运行无问题。

问题需求 #

希望通过嵌套文件夹更好地组织翻译文件，例如在public/static/locales/en下创建blocks文件夹，存放：

• public/static/locales/en/blocks/a.json
• public/static/locales/en/blocks/b.json
• 更多基础区块文件

由于采用动态构建页面的区块系统，不想引入不必要的翻译内容，但尝试导入命名空间"blocks/a"时失败，仅当文件放在语言根目录（如public/static/locales/a.json）时，才能通过命名空间a正常引用。

解决方案 #

next-i18next支持通过点分隔符映射嵌套文件夹的命名空间，无需使用路径斜杠，具体操作如下：

1. 保持现有嵌套文件夹结构不变，继续使用public/static/locales/en/blocks/a.json这类路径。
2. 修改命名空间的引用方式：
   • 在getStaticProps的serverSideTranslations中，将命名空间写成'blocks.a'：

     export async function getStaticProps({
         locale,
     }: GetStaticPropsContext): Promise<GetStaticPropsResult<ServerProps>> {
         return {
             props: {
                 ...(await serverSideTranslations(locale, ['home', 'blocks.a', 'blocks.b']),
             },
         };
     }
     

   • 客户端使用useTranslations('blocks.a')调用对应翻译文件的内容：

     const t = useTranslations('blocks.a');
     t('your-translation-key');
     

原理：next-i18next会自动将命名空间中的点解析为文件夹路径，blocks.a会对应到blocks/a.json文件，刚好匹配嵌套组织的需求。

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