Looking to add a layout to my page similar to the one in this link:
The difference is that my page is wrapped with a HOC, so I tried applying getLayout to the higher order component itself like this:
PageWithAuth.getLayout
However, I encountered this error:
https://i.sstatic.net/VVtAR.jpg
The structure of the page is as follows:
function TestPage() {
return {
/** Your content */
}
}
const PageWithAuth = withAuth(TestPage);
PageWithAuth.getLayout = function getLayout(page: ReactElement) {
return (
<Layout>{page}</Layout>
)
}
export default PageWithAuth;
The _app.tsx file has the following setup:
type NextPageWithLayout = NextPage & {
getLayout?: (page: ReactElement) => ReactNode
}
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout
}
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout ?? ((page) => page)
return getLayout(<Component {...pageProps} />)
}
The HOC is defined as follows:
export function withAuth<P>(WrappedComponent: React.ComponentType<P>) {
const ComponentWithAuth = (props: P) => {
return <WrappedComponent {...props} />;
};
return ComponentWithAuth;
}
How can this issue be resolved?