如何处理调用 API 的 Next.js 中动态路由的未找到 404？

Question

我有一个由 React 和 Next.js 在客户端开发的网站，并从 Asp.Net core 服务器调用 API 来获取动态数据，例如产品和类别。

问题是当我请求的 URL 中有未定义的参数（需要传递给 API 来获取相关数据）时，如何重定向到 404 未找到页面。

例如，如果请求的 URL 是 https://domain/product/unique-title-of-product，则“unique-title-of-product”将传递给 API，响应的数据将显示在产品详细信息页面中。但是，如果请求的 URL 是“https://domain/product/not-existed-title”，我该如何检查并将其重定向到 404-not-found-page？

我不想将 undefined-title 传递给服务器，因为如果不处理它，它将响应 null 或 200 或 500 内部服务器错误。那么看来我必须在客户端处理 404 重定向，而无需任何服务器端交互。但是当我尝试在 next.js 中使用 404 状态代码进行重定向时，状态代码将不会反映在浏览器中。

在客户端处理此问题的最佳解决方案是什么？或者我应该在服务器端处理它？

Answer 1

获得 GoogleBot 理解的真实“HTTP 404”响应的一种方法是生成 404 服务器端。首先，在 /pages/404.js 中编写默认的 404.js 页面。之后，将此功能添加到您的动态页面中：export async function getServerSideProps (context) {  // this will be called server-side only  const pid = context.params.pid;  // connect to your db to check if it exists, make a webservice call...  if (!checkIfExists(pid)) {    return { notFound: true };    // this will display your /pages/404.js error page,    // in the current page, with the 404 http status code.  }  return {    props: {      pid,      // you may also add here the webservice content      // to generate your page and avoid a client-side webservice call    }  };};

Answer 2

您可以进行验证，检查参数是否有效，并相应地重定向nextjs 负责pages/404.js，除非您想自定义它，否则不需要显式添加它。考虑以下页面pages/post/[pid].js：import { useRouter } from 'next/router'const Post = () => {&nbsp; const router = useRouter()&nbsp; const { pid } = router.query&nbsp; // if id is not valid, explicitly redirect to 404 page&nbsp; &nbsp;if(!pid){&nbsp; &nbsp; &nbsp; &nbsp;router.push('/404')&nbsp; &nbsp;}&nbsp; return <p>Post: {pid}</p>}export default Post

Answer 3

App Router 的方法是调用notFound()函数：import { notFound } from 'next/navigation' async function fetchUser(id) {  const res = await fetch('https://...')  if (!res.ok) return undefined  return res.json()} export default async function Profile({ params }) {  const user = await fetchUser(params.id)   if (!user) {    notFound()  }   // ...}