How do I handle errors when fetching data in Next.js?

How do I handle errors when fetching data in Next.js?

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

Can you show me an example of that?

Sure! Here's a simple example:

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    return null;
  }
}

What should I do if the error occurs on the server side?

For server-side errors, you can use error handling in your getServerSideProps or getStaticProps functions. You can return an error status and handle it in your component.