I am using Next.js v13.4.19 for a practice application, using the app router mode. The not-found.js
page present in the app
folder is not rendering a 404 page when a non-existing route is accessed, as it should. In addition, any internal route with an invalid slug is accessed, and it shows the same behaviour. Please help.
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> ) }
This was my mistake. The system requirements on the installation page clearly state that the requisite Node.js version must be v16.14
or higher. I was using v16.13.2
. I've upgraded it to the latest version v18.16.1
and it works really well. However, I am surprised that there was not any error message either in the server or the client about this incompatibility. I really hope this post helps someone out.