NextJS page layouts

_app.tsx

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

function App(props: AppProps) {
  const { Component, pageProps } = props;

  // Use the layout defined at the page level, if available
  const getLayout = (Component as any).getLayout ?? ((page) => page); // <- typecast couldn't defined with a type holding all possible generic instances.
  
  return (
    <>
      {getLayout(<Component {...pageProps} />)}  
    </>
  );
}

Layout1.tsx

import React from 'react';

function Layout1({ children }) {
  return (
    <>
      <main>{children}</main>
      <footer>
        By you
      </footer>
    </>
  );
}

export default Layout1;

layouts.d.ts

import { NextPage } from 'next';
import { AppProps } from 'next/app';
import { ReactElement, ReactNode } from 'react';

export type NextPageWithLayout<T> = NextPage<T> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

export type AppPropsWithLayout<T> = AppProps & {
  Component: NextPageWithLayout<T>;
};

NEXT-PAGE-LAYOUTS.md

Basic sample using typescript

page1.tsx

import { NextPageWithLayout } from 'lib/layouts';
import Layout1 from '@components/layouts/Layout1';
import React, { ReactElement } from 'react';

// type MyPropsType = { ... };

const Page1: NextPageWithLayout<MyPropsType> = (props) => {
  return (
      <>
        My Page content!
      </>
  );
};

Page1.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout1>
      {page}
    </Layout1>
  )
}

export default Page1;