javascriptnext.jscustom-error-pages

Next.js not-found.js file showing a blank page instead of a 404 message


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

Solution

  • 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.