How can I handle data fetching errors in Next.js?

How can I handle data fetching errors in Next.js?

In Next.js, you can handle data fetching errors by using try-catch blocks in your data fetching methods.

Can you give me an example of that?

Sure! Here's a simple example using getServerSideProps:

export async function getServerSideProps() {
  try {
    const res = await fetch('https://api.example.com/data');
    if (!res.ok) throw new Error('Network response was not ok');
    const data = await res.json();
    return { props: { data } };
  } catch (error) {
    console.error(error);
    return { props: { error: 'Failed to fetch data' } };
  }
}

What should I do if I want to show a custom error page?

You can create a custom error page by using the Error component in Next.js. You can pass the error message as a prop to display it.