How do I handle errors in Next.js SSG?

How do I handle errors in Next.js SSG?

In Next.js, you can handle errors in Static Site Generation (SSG) by using the getStaticProps function. You can return an error status or a fallback page.

Can you show me an example of that?

Sure! In your getStaticProps, you can catch errors and return a notFound property or a custom error message. Here's a simple example:

export async function getStaticProps() {
  try {
    const data = await fetchData();
    return { props: { data } };
  } catch (error) {
    return { notFound: true }; // This will show a 404 page
  }
}

What if I want to display a custom error page instead?

You can create a custom error page by returning a specific prop and then rendering it in your component. For example:

export async function getStaticProps() {
  try {
    const data = await fetchData();
    return { props: { data } };
  } catch (error) {
    return { props: { error: 'Failed to load data' } };
  }
}

const MyPage = ({ data, error }) => {
  if (error) return <div>{error}</div>;
  return <div>{data}</div>;
};