10

I have a website which is developed by React and Next.js in client side and calls APIs from Asp.Net core server to fetch dynamic data such as products and categories.

The issue is how to redirect to 404 not found page when I have undefined parameters in requested URL which needed to pass to API to get related data.

For example, if the requested URL is https://domain/product/unique-title-of-product, "unique-title-of-product" will pass to API and responded data will show in product details page. But if the requested URL is "https://domain/product/not-existed-title", how do I check this and redirect it to 404-not-found-page?

I don't want to pass undefined-title to server because it will respond null or 200 or 500 internal server error if it is not handled. Then it seems I have to handle 404 redirect in client side without any server side interaction. But when I try to redirect with 404 status code in next.js, the status code will not to be reflected in browser.

What is the best solution to handle this issue in client side? Or should I handle it server side?

Mehdi
  • 499
  • 1
  • 7
  • 31
  • "I don't want to pass undefined-title to server because it will respond null or 200 or 500 internal server error if it is not handled." I don't understand this part. How can you know if `not-existed-title` exists or not without checking with the backend API server? A asked a related question at: https://stackoverflow.com/questions/67773885/how-to-return-a-404-not-found-page-and-http-status-when-an-invalid-parameter-of which might also be of interest. – Ciro Santilli OurBigBook.com May 31 '21 at 12:37

2 Answers2

13

A way to get a real "HTTP 404" response understood by GoogleBot is to generate the 404 server side.

First, write a default 404.js page in /pages/404.js.

After, add this function to your dynamic page:

export async function getServerSideProps (context) {
  // this will be called server-side only
  const pid = context.params.pid;

  // connect to your db to check if it exists, make a webservice call...
  if (!checkIfExists(pid)) {
    return { notFound: true };
    // this will display your /pages/404.js error page,
    // in the current page, with the 404 http status code.
  }
  return {
    props: {
      pid,
      // you may also add here the webservice content
      // to generate your page and avoid a client-side webservice call
    }
  };
};
Vincent J
  • 4,968
  • 4
  • 40
  • 50
  • This should be the accepted answer! – aletede91 Mar 15 '22 at 19:05
  • @aletede91 why ? question says that data must be requested from client side – howard wolowitz Jul 04 '22 at 09:23
  • 2
    @Rajesh Koothropali -> because the question has a contradiction. 404 HTTP Error *IS* a server-side error; on client-side, you can never get the real "404", at best, you can mimic the error page or message manually. If you want to get the benefits of the 404, like correct search engine indexing, then you have to do it server side. – Vincent J Jul 10 '22 at 21:21
3

You can put validation, check if param is valid or not, and redirect accordingly

nextjs take care of pages/404.js, you do not need to explicitly add it unless you want to customize it.

Consider the following page pages/post/[pid].js:

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query
  // if id is not valid, explicitly redirect to 404 page
   if(!pid){
       router.push('/404')
   }
  return <p>Post: {pid}</p>
}

export default Post
Nilesh Patel
  • 3,193
  • 6
  • 12