Hey Alex, I think you complicate the things, because you only need to do this in :

_app.tsx

import type { NextComponentType } from 'next';

import type { AppProps } from 'next/app';

import { FC, Fragment } from 'react';

type CustomNextComponent = NextComponentType & { Layout?: FC };

type CustomAppProps = AppProps & { Component: CustomNextComponent };

function MyApp({ Component, pageProps }: CustomAppProps) {

const Layout: CustomNextComponent | typeof Fragment = Component.Layout

? Component.Layout

: Fragment;

return (

<Layout>

<Component {...pageProps} />

</Layout>

);

}

export default MyApp;

and then in index.tsx page:

import Home from 'components/Home';

import AdminLayout from 'layouts/AdminLayout';

function HomePage() {

return <Home />

}

HomePage.Layout = AdminLayout;

export default HomePage;

the adminLayout can be something like this:

adminLayout page:

import type { PropsWithChildren, ReactElement } from 'react';

function AdminLayout({ children }: PropsWithChildren<{}>): ReactElement {

return (

<div>

Admin Layout

{children}

</div>

);

}

export default AdminLayout;

By the way, is a bad practice use any, this type is used usually for third party integrations where you don't have control.