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