如何在客户端页面转换后为服务器端呈现的动态路由返回404页面

Question

我正在开发一个以Contentful作为内容管理系统的next.js项目。我想在客户端页面转换后返回服务器端呈现的动态路由的404页面。

当我直接请求页面(通过输入url或刷新页面(时，一切都很好，404页面会被返回。但是当用户已经在该网站上并且通过"；下一个/链接"；链接(客户端页面转换(到服务器端呈现的页面，getServerSideProps只返回包含结果的JSON。正如这里所记录的，这是可以的：https://nextjs.org/docs/basic-features/data-fetching#only-在服务器端运行。这导致一个完全空的网站和以下控制台错误：

[Error]加载资源失败：服务器响应状态为404(未找到((page.json，第0行(

这是我要导航到的页面的getServerSideProps：

export const getServerSideProps: GetServerSideProps = async ({ params }: Params) => {
const { slug } = params;
try {
const entry: Entry<any> = await (
await ContentfulService.getInstance().getEntryBySlugAndType(slug, 'page', 4)
).items[0];
const page: IPageFields = entry.fields;
return {
props: { page }
};
} catch (error) {
return { notFound: true };
}
};

我做错了什么？是否有机会返回404页面进行客户端页面转换？

Answer 1

我可以通过在404页面中添加一个简单的getStaticProps来解决我的问题。

像这样：

export const getStaticProps: GetStaticProps = async () => {
return {
props: {}
};
};