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

Posted 2023-02-22

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

【英文标题】：How to handle not found 404 for dynamic routes in Next.js which is calling API?

【发布时间】：2021-03-17 23:15:57

【问题描述】：

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

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

例如，如果请求的 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 状态码进行重定向时，状态码不会反映在浏览器中。

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

【问题讨论】：

"我不想将 undefined-title 传递给服务器，因为如果不处理它会响应 null 或 200 或 500 内部服务器错误。"我不明白这部分。如果不检查后端 API 服务器，你怎么知道not-existed-title 是否存在？ A 在***.com/questions/67773885/… 提出了一个相关问题，这可能也很有趣。

【参考方案1】：

您可以进行验证，检查参数是否有效，并进行相应的重定向

nextjs 负责 pages/404.js，除非你想自定义，否则不需要显式添加。

考虑以下页面 pages/post/[pid].js：

import  useRouter  from 'next/router'

const Post = () => 
  const router = useRouter()
  const  pid  = router.query
  // if id is not valid, explicitly redirect to 404 page
   if(!pid)
       router.push('/404')
   
  return <p>Post: pid</p>


export default Post

【讨论】：

如果页面正在服务器上呈现，这将不起作用。

【参考方案2】：

获得 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
    
  ;
;