1function CheckError(response) {
2  if (response.status >= 200 && response.status <= 299) {
3    return response.json();
4  } else {
5    throw Error(response.statusText);
6  }
7}
8
9// Now call the function inside fetch promise resolver
10fetch(url)
11  .then(CheckError)
12  .then((jsonResponse) => {
13  }).catch((error) => {
14  });

1fetch("/api/foo")
2  .then( response => {
3    if (!response.ok) { throw response }
4    return response.json()  //we only get here if there is no error
5  })
6  .then( json => {
7    this.props.dispatch(doSomethingWithResult(json)) 
8  })
9  .catch( err => {
10    err.text().then( errorMessage => {
11      this.props.dispatch(displayTheError(errorMessage))
12    })
13  })
14

1const response = await fetch(url);
2if (response.status >= 200 && response.status <= 299) {
3  const jsonResponse = await response.json();
4  console.log(jsonResponse);
5} else {
6  // Handle errors
7  console.log(response.status, response.statusText);
8}

1export async function getStaticProps(context) {
2  const res = await fetch(`https://...`)
3  const data = await res.json()
4
5  //use this statement for the program not to crush but go back to the home page
6  if (!data) {
7    return {
8      redirect: {
9        destination: '/',
10        permanent: false,
11      },
12    }
13  }
14
15  return {
16    props: {}, // will be passed to the page component as props
17  }
18}