为什么我没有得到自定义Next.js 404.js页面的404响应代码?

wlzqhblo  于 2023-05-28  发布在  其他
关注(0)|答案(1)|浏览(148)

这里有两种情况。一个工作,另一个没有。
我在Next.js 12中的pages目录中添加了一个404.js页面。
如果我转到一个没有定义路由的URL,例如domain.tld/non-existing-route,那么我会得到404 HTTP状态码,并且会显示我的自定义未找到页面。
然而,如果我转到一个有参数的路由,例如domain.tld/post/slug,并提供一个不存在的slug,我仍然会得到我的自定义404页面,但这次是HTTP状态码200。
在我的post/[slug].js页面中,这是我的getServerSideProps

const getServerSideProps = async (context) => {

    const { slug } = context.params || {}

    var url = `/post/data?slug=${slug}`

    const data = await apiClient(url)

    return {
        props: {
            ...data,
        }
    }
}

slug不存在时,我们的API返回404和以下JSON:

{
  "type": 404,
  "message": "Not found"
}

这将由我们的apiClient代码处理,这个JSON将返回给getServerSideProps

{ 
   statusCode: 404, 
   message: 'Item does not exist' 
}

然后在我们的/post/[slug].js文件中,我们有这个JSX:

import NotFound from '../../404'

const Post = ({
    post,
    seoParameters,
    statusCode,
}) => {
    return <>
       {
           statusCode === 404
             ?
                <NotFound />
             :
                <Layout />
       }
    </>
}

会有什么问题呢?

3ks5zfa0

3ks5zfa01#

在Next.js pages目录中,在getServerSideProps函数中返回notFound,告诉Next.js它不是一个有效的路由。

export getServerSideProps = async (context) => {
  const data = await yourApiClient(`/post/data?slug=${slug}`);

  if (!data) { // make sure data is the proper key for your api
    return { notFound: true };
  }
 
  return { props: { data } };
}

不需要向页面发送额外的 prop ,因此您可以删除状态码检查,并仅返回页面上的Layout

const Post = (props) => {
   console.log(props);
   return <Layout />;
}

export default Post;

相关问题