个人中心
gpt4 book ai didi

Loading Translation Files from a Server or CMS in next-intl - Seeking Guidance(在下一步国际指南中从服务器或CMS加载翻译文件)

转载 作者：bug小助手 更新时间：2023-10-25 14:34:00 28 4
gpt4 key购买 nike



I'm looking for a solution to load translation files directly from a server or a Content Management System (CMS) in next-intl, rather than relying on local translation files. Currently, the documentation recommends importing translation files from the messages directory, as demonstrated in this code snippet:

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


i18n.ts

I18n.ts


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

However, this approach poses challenges when it comes to correcting translation errors or making updates since it requires changes to project files and website redeployment. Is there a method to fetch translations directly from the server or a CMS? I've seen videos mentioning this capability, but I haven't found any relevant documentation.

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


I attempted the following approach, but it didn't yield the desired results:

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


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

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

}));

Could someone please provide guidance on how to load translations from a server in next-intl, or point me in the right direction if there's documentation or resources available for this specific feature? Your assistance would be greatly appreciated.

有没有人能就如何在Next-intl中从服务器加载翻译提供指导，或者如果有文档或资源可用于此特定功能，请为我指明正确的方向？您的帮助我们将不胜感激。


更多回答
优秀答案推荐

You're doing well, but you forgot to await the promise.

你做得很好，但你忘了等待诺言。


Your code:


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

Not the right side type ((fetch(apiendpoint/${locale}).then(res => res.json()).then(res => res.data)) is Promise<any> but messages expect to receive IntlMessages.

不是右侧类型((FETCH(apipoint/${Locale}).Then(res=>res.json()).Then(res=>res.data)是Promise ，但消息希望接收IntlMessages。


Try this instead:

试着这样做：


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

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

This code looks unorganized, so let's format it:

这段代码看起来没有条理，所以让我们格式化它：


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
    }
})

更多回答

Thanks, I had added 'await' before, but I removed it since the response was the same. The problem for me was the API endpoint I was using. After some debugging, I found that there was no data inside the response. I am marking this as accepted because this solution is correct, better formatted, and may help someone. I'm currently facing an issue where Next.js isn't switching locales when making API calls, it is stuck on 'en' even though I am switching to 'ar'.

谢谢，我之前加了‘等待’，但因为反应是一样的，所以我把它删除了。对我来说，问题在于我使用的API端点。经过一些调试后，我发现响应中没有数据。我将此标记为已接受，因为此解决方案是正确的，格式更好，可能会对某人有所帮助。我目前面临一个问题，在进行API调用时，Next.js不会切换区域设置，即使我切换到‘ar’，它仍然停留在‘en’上。

The problem is fixed now. The issue for me was that I was using the 'src' directory, whereas in the documentation, they do not use the 'src' folder. Inside the documentation, they store the middleware file in the root directory, which was causing errors for me because I was using the 'src' directory. If anyone else is encountering the same problem, simply save the middleware file in the 'src' directory.

问题现在已经解决了。对我来说，问题是我使用的是‘src’目录，而在文档中，他们没有使用‘src’文件夹。在文档内部，他们将中间件文件存储在根目录中，这会给我带来错误，因为我使用的是‘src’目录。如果其他任何人遇到同样的问题，只需将中间件文件保存在‘src’目录中。

You're right. The middleware must be as level as the app directory.

你是对的。中间件必须与应用程序目录级别相同。

28 4 0
文章推荐： Creating Real Time Filters for my Camera App, created using CameraX and JetPack Compose(为我的相机应用程序创建实时滤镜，使用CameraX和Jetpack Compose创建)
文章推荐： ImportError: No module named dateutil.parser(ImportError：没有名为Dateutil.parser的模块)
文章推荐： Azure DevOps YAML Pipeline: 'DeployCode' Stage Skipping Unexpectedly(Azure DevOps YAML管道：“DeployCode”阶段意外跳过)
文章推荐： Can I Directly Pass Service Methods in .NET 7's Minimal API Routes?(我可以在.NET 7的最小API路由中直接传递服务方法吗？)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com