Breaking News: Grepper is joining You.com. Read the official announcement!

Not-found page does not work in next.js 13

Shirshak Kandel answered on November 24, 2023 Popularity 10/10 Helpfulness 5/10

answer Not-found page does not work in next.js 13

Not-found page does not work in next.js 13

Comment

//src\app\not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>Page not found</h2>
      <p>Are you lost?</p>
    </div>
  );
}
//for overall website you can use not-found.tsx or jsx in root of app folder

//app\products\[productId]\reviews\[reviewId]\page.tsx
//for seperate dynamic not found page use notFound function from next/navigation
//we can also create seperate 404 page for each route segment making seperate not-found.tsx
//here below we display that 
import { notFound } from "next/navigation";

export default function ReviewDetail({
  params,
}: {
  params: { productId: string; reviewId: string };
}) {
  if (parseInt(params.reviewId) > 1000) {
    notFound();
  }  

  return (
    <h1>
      Review {params.reviewId} for product {params.productId}{" "}
    </h1>
  );
}

//src\app\products\[productId]\reviews\[reviewId]\not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>Review not found cannot be greater then 1000 id</h2>
    </div>
  );       
}

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript next.js

Link to this answer
Share Copy Link

Contributed on Nov 24 2023

Shirshak Kandel

0 Answers Avg Quality 2/10

Not-found page does not work in next.js 13

Contents

More Related Answers

Not-found page does not work in next.js 13

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.