【发布时间】：2022-01-01 09:53:56
【问题描述】：
首先要做的事情 - 我已经阅读了 Next.js 文档，通过了教程，查看了许多示例，但归根结底，我仍然无法使用 Next.js 实现一个非常简单的事情.
我有一个具有以下语言环境的应用程序：en 和 de。
路线如下所示：
/en/things/[id]
/de/things/[id]
所以基本上，我需要用两种语言显示一些与事物 ID 无关的静态文本。这些只是对所有 ID 都相同的纯文本。然后我有一些 AJAX 实际上需要路径中的 ID。
现在麻烦开始了：
- 如果我在
things/[id].js中没有getStaticProps，则会收到此错误：
Error: MISSING_MESSAGE: No messages were configured on the provider.
- 然后我像这样添加
getStaticProps：
export async function getStaticProps({locale}) {
return {
props: {
messages: await import(`../messages/${locale}.json`)
}
}
}
并得到这个错误：
Error: getStaticPaths is required for dynamic SSG pages and is missing for '/things/[id]'.
- 然后我像这样添加
getStaticPaths：
export const getStaticPaths = () => ({
paths: [],
fallback: 'blocking'
})
因为我有一百万个 ID，我无法预先生成所有页面。此外，新 ID 会在应用部署后出现，因此我无法在构建期间将所有可能的 ID 作为路径列出。
现在我收到此错误：
Error: Error serializing `.messages` returned from `getStaticProps` in "/things/[id]".
Reason: `object` ("[object Module]") cannot be serialized as JSON. Please only return JSON serializable data types.
我无法相信在一个声称使用 React 可以让生活更轻松的“框架”中实现如此简单的事情怎么会如此困难。我正在尝试将现有应用程序从 create-react-app 迁移到 Next.js，但是非常简单的事情很难实现。
请告诉我如何实现以下非常简单的事情：
- 拥有一个静态页面，其中包含两种语言的静态文本：EN 和 DE。
- 让用户像这样访问页面：
/[locale]/things/[id]。 - 有一些实际使用 URI 路径中的事物 ID 的 AJAX 代码。
【问题讨论】：
-
我也面临同样的问题！我可以做一件事或另一件事，但不能两者兼而有之。我决定不使用 getStaticPaths，因为我也有数千个 ID，而且我可以在一开始只预渲染几个，但在请求时这样做更有意义。现在，如果有人试图访问像 /orders/:id 这样的 url，它会进入到自身的无限重定向循环（也使用文档中的一个非常虚拟的示例）
-
但如果我从配置中删除 i18n 设置，它可以工作。
-
啊，在您的情况下，问题似乎是因为您没有将语言环境返回到 getStaticPaths 中的路径。你需要这样做。
标签： javascript reactjs next.js nextjs-dynamic-routing