© 2026 Hedgehog Software, LLC
MyApp
getLayout
// pages/_app.tsx import type { AppProps } from "next/app"; import { type AppType } from "next/app"; import { type Session } from "next-auth"; import { SessionProvider } from "next-auth/react"; import { trpc } from "../utils/trpc"; import "../styles/globals.css"; import type { NextPage } from "next"; import type { ReactElement, ReactNode } from "react"; export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { getLayout?: (page: ReactElement) => ReactNode; }; type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout; }; const MyApp: AppType<{ session: Session | null }> = ({ Component, pageProps: { session, ...pageProps }, }: AppPropsWithLayout) => { const getLayout = Component.getLayout || ((page: NextPage) => page); return getLayout( <SessionProvider session={session}> <Component {...pageProps} /> </SessionProvider> ); }; export default trpc.withTRPC(MyApp);
// pages/index.tsx import type { ReactElement } from "react"; import Layout from "../components/Layout/Layout"; import type { NextPageWithLayout } from "./_app"; const Home: NextPageWithLayout = () => { return ( <> <div>Hello</div> </> ); }; Home.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Home;