Next.js 13.4.19(App Router) not-found.js不显示404页面求助

1. 确保not-found.js文件存在且位置正确 #

在项目app目录（或对应路由段目录）下创建/检查not-found.js文件，示例内容如下：

export default function NotFound() {
  return (
    <main className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-2">404 - 页面不存在</h1>
      <p>你访问的页面不存在或无效，请检查路径后重试。</p>
    </main>
  )
}

• 若仅处理tickets/[id]路由下的错误，可将not-found.js放在app/tickets/[id]/目录下；若要全局处理所有404场景，放在app/根目录即可。

2. 完善数据获取的错误处理逻辑 #

原代码仅处理了HTTP状态码非2xx的情况，未捕获网络异常、请求超时等其他错误，导致异常时无法触发notFound()，出现空白页。修改getTicket函数：

import { notFound } from "next/navigation"

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

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

    return res.json()
  } catch (error) {
    // 捕获所有请求异常，触发404页面
    notFound()
  }
}

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>
  )
}

3. 排查开发环境缓存问题 #

如果修改后仍未生效，尝试：

• 重启Next.js开发服务器
• 删除项目根目录下的.next文件夹后重新启动服务

内容的提问来源于stack exchange，提问作者S Anwar