NextJS：动态 URL 自动重定向到根 url（主页）

Question

在 NextJS 中，我创建了一个动态页面来获取和显示博客内容，其 URL 如下 https://example.com/blog/[blogId]

但是当我尝试访问生产环境中的 URL 时，用户会被重定向到根 URL（主页）而不是博客内容页面。

下面是我的文件夹结构

pages

|__ blog

   |___ [blogId].tsx

谁能告诉我这里出了什么问题？ PS：在本地这工作正常。

Answer 1

如果您想使用 [blogId] 作为 URL 字符串的可变部分，您必须确保从您的数据源提供的数据完全匹配。

getStaticPaths 在您的情况下应该生成一个blogID 数组，如下所示：

export async function getStaticPaths() {
  const pages = await getPathsForBlogs();
  return {
    paths: pages?.map(({ node }) => `/blog/${blogID}`) || [],
    fallback: false,
  }
}

在getStaticPages 中，您将摄取paths 的堆栈，Next 将在每个blogID 处生成一个页面。在此示例中，我们将数据负载发送回自定义参数 page 上的组件，您将在 /pages/blog.js 组件中对其进行解构。

export async function getStaticProps({ params, preview = false, previewData }) {
  const pageData = await getSingleActionPage(params.blogID, previewData);

  return {
    props: {
      preview,
      page: pageData ?? null,
    },
    revalidate: 60,
  }
}