javascriptreactjsnode.jstypescriptnext.js

`throw new Error('Failed to load static props')` when setting `fallback: true` in `getStaticPaths` in Next.JS

Refer to discussion here. I faced similar error. Everything worked fine when fallback is set to false. However, when fallback is set to true, next js throws error

 throw new Error('Failed to load static props')
Solution

  • After lot of searching and trial and error, I found out that the error was because of the exceptions throws inside getStaticProps.

    To solve this issue all I did is to use try-catch block.

    export async function getStaticProps({ params }) {
  let data = null;
  try {
    data = await getData(params.slug);
  } catch (err) { };

  return {
    props: {
      data,
    },
  };

    And when rendering your can use

    if(props.data) return (<your-jsx-here></your-jsx-here>)
else return <div>Any message if you want</div>