如何在 NextJS 13 App Router 中从 page.jsx 抛出 404 Not Found 错误以及 404 状态代码？

Question

我在 page.tsx 组件中使用异步获取请求，类似于下面的代码

import { notFound } from 'next/navigation'


const PostViewPage = async ({params}) => {
    const {slug} = params;
    const resData = await fetch(`/api/post/${slug}`); //slug is a dynamic value
    const postData = resData.json();
    if(postData){
        //rest code
    }else{
        notFound();
    }

    return (<>JSX Code</>)
}

如果 slug 无效，则会在浏览器中显示 404 Not Found 页面。 但是，POSTMAN 中的路由状态代码为 200。 在此输入图片描述

我想抛出 404 未找到页面错误以及 404 状态代码。 如果有任何解决办法，请指导我。

尝试抛出带有状态代码的 404 错误。 我在浏览器上收到 404 未找到页面错误，但状态代码变为 200。 我期望状态代码应该是 404 而不是 200。

Answer 1

如果这就是您的

page.tsx

文件的全部内容，请仔细检查以确保您将

notFound

函数导入到您的文件中。

import { notFound } from 'next/navigation'

您的根目录中还需要有一个

app/not-found.tsx

。当在路线段内抛出 notFound 函数时，此文件会呈现 UI。

阅读更多关于 NEXT.js 文档。