Next.js render pages issue with getInitProps

Question

I am implementing protecting routes in Next.js, on each page I added:

export async function getStaticProps(context) {
  return {
    props: {
      protected: true,
    },
  };
}

After included getStaticProps on each page, I started getting the next error in _document.jsx getInitProps:

This is the exact place where error happens:

    ctx.renderPage = () => originalRenderPage({
       enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
     });

This is _document.jsx file

static async getInitialProps(ctx) {
   const sheet = new ServerStyleSheet();
   const originalRenderPage = ctx.renderPage;

   try {
     ctx.renderPage = () => originalRenderPage({
       enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
     });

     const initialProps = await Document.getInitialProps(ctx);
     return {
       ...initialProps,
       styles: (
         <>
           {initialProps.styles}
           {sheet.getStyleElement()}
         </>
       ),
     };
   } finally {
     sheet.seal();
   }
}

Any idea what is the error? I am trying to understand where is a problem