Returning a 404 from an API endpoint in Next.js returning error

Question

The problem is that if an ID is not in the database it will return a 404 error, I tried to make a check in if the res.status == 404 but it returns the error before going to the validation.

    export const getServerSideProps = async (context) => {
  const { id } = context.query;

  const res = await axios.get(`${process.env.API_URL}/user/jobs/${id}`); //if ID does not exists here returns an error an does not validate the below lines
  if (res.status == 404) { //not check if the above request returns a 404
    return {
      notFound: true,
    };
  }
  const jobs = res.data;
  return {
    props: {
      jobs,
    },
  };
};

Wrap the axios call with a `try`/`catch` block and handle the error inside the `catch`. — juliomalves, Mar 23 '22 at 00:12

score 1 · Answer 1 · answered Mar 21 '22 at 17:50

1

Rather than creating a conditional based on the result, you should create an error handler. How to handle reactjs errors: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

answered Mar 21 '22 at 17:50

Cheese

118
10

thank you for your comment, ErrorBoundary would work if this would happen in client side inside component, the error occurs in the function ( getServerSideProps ) which is executed before the component is displayed – n9p4 Mar 22 '22 at 13:00

score -1 · Accepted Answer · answered Mar 22 '22 at 13:15

Instead of axios, use fetch.

export const getServerSideProps = async (context) => {
  const { id } = context.query;

  const res = await fetch(`${process.env.API_URL}/user/application/${id}`);
  const data = await res.json();
  console.log(data);
  if (data.success == false) {
    return {
      notFound: true,
    };
  }
  const jobs = data.job;

  return {
    props: {
      jobs,
    },
  };
};

Returning a 404 from an API endpoint in Next.js returning error

2 Answers2