未能获得非常简单的i18n和动态路由来使用Next.js

Question

首先，我已经阅读了Next.js文档，通过了教程，看了很多例子，但最终，我仍然无法用Next.js实现一件非常简单的事情。

我有一个具有以下区域设置的应用程序：en和de。

路线如下：

/en/things/[id]
/de/things/[id]

所以基本上，我需要用两种语言显示一些与ID无关的静态文本。这些只是纯文本，所有ID都是一样的。然后我有一些AJAX，它实际上需要来自路径的ID。

现在麻烦开始了：

1. 如果things/[id].js中没有getStaticProps，则会出现以下错误：

Error: MISSING_MESSAGE: No messages were configured on the provider.

2. 然后我像这样添加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]'.

3. 然后我像这样添加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应用程序迁移到Next.js，但非常简单的事情很难实现。

请告诉我如何实现以下非常简单的事情：

1. 有一个静态页面，其中包含两种语言的静态文本：EN和DE
2. 让用户访问如下页面：/[locale]/things/[id]
3. 有一些AJAX代码，它实际上使用了URI路径中的东西ID

Answer 1

您不应该为本地语言创建两个单独的路由，而应该设置next-i18next它将根据选定的本地语言自动异步链接。