Next.js not-found.js 文件显示空白页面而不是 404 消息

Question

我正在使用 Next.js v13.4.19 进行练习应用程序，使用应用程序路由器模式。当访问不存在的路由时，

not-found.js

文件夹中存在的

app

页面不会呈现 404 页面，而它应该是这样。此外，访问具有无效 slug 的任何内部路由，并且它显示相同的行为。请帮忙。

import { notFound } from "next/navigation"


async function getTicket(id) {   const res = await fetch(`http://localhost:4000/tickets/${id}`, {
    next: {
      revalidate: 60
    }   })

  if (!res.ok) {
    notFound()   }

  return res.json() }


export default async function TicketDetails({ params }) { const ticket = await getTicket(params.id)

  return (
    <main>
      <nav>
        <h2>Ticket Details</h2>
      </nav>
      <div className="card">
        <h3>{ticket.title}</h3>
        <small>Created by {ticket.user_email}</small>
        <p>{ticket.body}</p>
        <div className={`pill ${ticket.priority}`}>
          {ticket.priority} priority
        </div>
      </div>
    </main>   ) }

Answer 1

试试这个：

import { notFound } from "next/navigation"

async function getTicket(id) {
  const res = await fetch(`http://localhost:4000/tickets/${id}`, {
    next: {
      revalidate: 60
    }
  })

  if (!res.ok) {
    throw new Error("Ticket not found");
  }

  return res.json();
}

export default async function TicketDetails({ params }) {
  try {
    const ticket = await getTicket(params.id);

    return (
      <main>
        <nav>
          <h2>Ticket Details</h2>
        </nav>
        <div className="card">
          <h3>{ticket.title}</h3>
          <small>Created by {ticket.user_email}</small>
          <p>{ticket.body}</p>
          <div className={`pill ${ticket.priority}`}>
            {ticket.priority} priority
          </div>
        </div>
      </main>
    );
  } catch (error) {
    notFound();
    return null;
  }
}

现在，如果未找到票证，则会抛出错误。错误在 try 块中被捕获，并调用 notFound() 函数来指示应显示 404 页面。

Answer 2

这是我的错误。安装页面上的系统要求明确指出所需的 Node.js 版本必须是

v16.14

或更高版本。我正在使用

v16.13.2

。我已经将其升级到最新版本

v18.16.1

并且效果非常好。然而，令我惊讶的是，服务器或客户端都没有任何关于这种不兼容性的错误消息。我真的希望这篇文章可以帮助别人。