3

首先要做的事情——我已经阅读了 Next.js 文档，通过了教程，查看了许多示例，但归根结底，我仍然无法使用 Next.js 实现一个非常简单的事情。

我有一个具有以下语言环境的应用程序：en和de.

路线如下所示：

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

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

现在麻烦开始了：

  1. 如果我没有getStaticPropsin things/[id].js，我会收到此错误：
Error: MISSING_MESSAGE: No messages were configured on the provider.
  1. 然后我添加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]'.
  1. 然后我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，但是非常简单的事情很难实现。

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

  1. 拥有一个静态页面，其中包含两种语言的静态文本：EN 和 DE。
  2. 让用户像这样访问页面：/[locale]/things/[id].
  3. 有一些实际使用来自 URI 路径的事物 ID 的 AJAX 代码。
4

1 回答 1

1

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

于 2022-01-01T12:13:12.503 回答