Dynamic route prevents redirecting to 404 page in Next.js

user_2237469 0
Viewed 15844

I have a [pid].js file in my Next.js project. I also wanted to implement a custom 404 page but here is the problem: I put 404.js file inside /pages directory. If I delete my [pid].js file, 404 page works just fine. But, if I keep my [pid].js file, the first request goes into pids, and since the url does not match any of the pages defined in pids, I get an error. Should I explicitly return my 404 component from pids? Is this a good practice?

Here is the code (which does not redirect to 404 page right now):

[pid].js

const Pid = ({ url, props }) => {
    const getPages = () => {
        let component = null;
        switch (url) {
            case 'checkout':
                component = <CheckoutPage {...props} />;
                break;
            //other switch cases...
            default:
                //should I return my 404 component here?
                component = <DefaultPage {...props} />;
        }
        return component;
    };

    return getPages();
};

export async function getServerSideProps(context) {
    const res = await getReq(`/getUrl`, 'content', context);

    switch (res.url) {
        case 'checkout': {
            return {
                props: {
                    url: res.url,
                    props: {
                    ... //my other props
                    },
                },
            };
        }
        default:
            return {
                props: null,
            };
    }
}

Pid.propTypes = {
    url: PropTypes.string.isRequired,
};

export default Pid;
next.js javascript
2 Answers

From NextJS 10 onwards, you don't have to return your 404 page explicitly thanks to the new flag notFound: true. You can use it at getStaticProps and getServerSideProps to auto trigger the default 404 page or your own custom 404 page as well.

Check out these examples from NextJS Docs.

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data }, // will be passed to the page component as props
  }
}

export async function getServerSideProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

Doc References

  1. notfound Support on Nextjs10

  2. notfound on getStaticProps

  3. notfound on getserversideprops

  4. Custom 404 Page

user_35565310

From Next.js 10, you can return notFound: true from your getServerSideProps to trigger a 404 page.

export async function getServerSideProps(context) {
    const res = await getReq(`/getUrl`, 'content', context);
    switch (res.url) {
        case 'checkout': {
            return {
                props: {
                    //my other props
                },
            };
        }
        default:
            return {
                notFound: true
            };
    }
}

I've placed it in the default case as an example, but feel free to return it at any other point/condition.

user_18707800
Related