从 next-intl 中的服务器或 CMS 加载翻译文件 - 寻求指导

Question

我正在寻找一种解决方案，可以直接从 next-intl 中的服务器或内容管理系统 (CMS) 加载翻译文件，而不是依赖本地翻译文件。目前，文档建议从 messages 目录导入翻译文件，如以下代码片段所示：

i18n.ts

import {getRequestConfig} from 'next-intl/server';
 
export default getRequestConfig(async ({locale}) => ({
  messages: (await import(`./messages/${locale}.json`)).default
}));

但是，这种方法在纠正翻译错误或进行更新时会带来挑战，因为它需要更改项目文件和重新部署网站。有没有办法直接从服务器或 CMS 获取翻译？我看过视频提到此功能，但我没有找到任何相关文档。

我尝试了以下方法，但没有达到预期的结果：

import {getRequestConfig} from 'next-intl/server';
 
export default getRequestConfig(async ({locale}) => ({

    messages: (fetch(`apiendpoint/${locale}`).then(res => res.json()).then(res => res.data)
    )

}));

有人可以提供有关如何从 next-intl 中的服务器加载翻译的指导吗？或者如果有可用于此特定功能的文档或资源，请为我指出正确的方向？我们将非常感谢您的帮助。

Answer 1

你做得很好，但你忘记了

await

的承诺。

您的代码：

import {getRequestConfig} from 'next-intl/server';
 
export default getRequestConfig(async ({locale}) => ({
    messages: (fetch(`apiendpoint/${locale}`).then(res => res.json()).then(res => res.data)
    )
}));

不是右侧类型（

(fetch(

apiendpoint/${locale}

).then(res => res.json()).then(res => res.data)

）是

Promise<any>

，但

messages

期望收到

IntlMessages

。

试试这个：

export default getRequestConfig(async ({locale}) => ({

    messages: (await fetch(`apiendpoint/${locale}`).then(res => res.json()).then(res => res.data)
    )
}));

这段代码看起来杂乱无章，所以我们来格式化一下：

export default getRequestConfig(async ({locale}) => {
    const res = await fetch(endpoint)
    const data = await res.json()
    // Now, (data) is the json data returned from the api
    // try to console.log it to see if it contains data.data
    const messages = data.data
    
    return {
       messages
    }
})