My current project involves using Next.js v13.4.19 with the app router mode. However, I seem to be facing an issue with the not-found.js page located in the app folder. Whenever a non-existing route is accessed, it does not render a 404 page as expected. Furthermore, even when trying to access an internal route with an invalid slug, the behavior remains the same. Any assistance on resolving this problem would be greatly appreciated.
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> ) }