Layouts util for Next.js

_app.tsx

import { FC } from "react"
import { AppProps, RenderLayout } from "utils/layouts"

const App: FC<AppProps> = ({ Component, ...props }) => {
  return (
    <RenderLayout Layout={Component.Layout} props={props}>
      <Component {...props.pageProps} />
    </RenderLayout>
  )
}

export default App

layouts.tsx

import { NextPage } from "next"
import { AppProps as BaseAppProps } from "next/app"
import { FC } from "react"

export type AppProps = BaseAppProps & { Component: Page }

export type Page = NextPage & { Layout?: Layout }

export type LayoutProps = Omit<AppProps, "Component">
export type Layout = FC<LayoutProps> & { Layout?: Layout }

export const RenderLayout: FC<{ Layout?: Layout; props: LayoutProps }> = ({
  Layout: BaseLayout,
  props,
  children,
}) => {
  let comp = <>{children}</>

  if (BaseLayout) {
    comp = <BaseLayout {...props}>{children}</BaseLayout>

    if (BaseLayout?.Layout)
      comp = (
        <RenderLayout Layout={BaseLayout.Layout} props={props}>
          {comp}
        </RenderLayout>
      )
  }

  return comp
}