title: getServerSideProps and NextJS Typescript Layout
body: <p>Guys I am struggling with getting NextJS Layout working with Typescript. I know I am close. All of below works as expected!! but I cannot get the annoying squiggle to disappear when I pass props from getServerSideProps.</p>
  <p>props <code>{someText)</code> is always underlined with squiggle - see link to screen shot</p>
  <p>I realise I cannot pass these props to the Layout itself but my understanding is I should be able to pass to the page itself... and as I say the code does work!</p>
  <p>Spent too long trying to resolve .. hoping someone on this forum can put me right:)</p>
  <p>I am working around for now with <code>{someText}:any</code></p>
  <p><a href="https://i.stack.imgur.com/omSG3.png" rel="nofollow noreferrer">screenshot</a></p>
  <p>This is my next.d.ts</p>
  <pre><code>import type { NextPage } from 'next';
  import NextComponentType from 'next/dist/shared/lib/utils'
  import type { AppProps } from 'next/app';
  
  declare module 'next' {
      type Page&lt;P = {}, IP = P&gt; = NextPage&lt;P, IP&gt; &amp; {
          getLayout?: (Component: NextComponentType) =&gt; JSX.Element;
      }
  }
  
  declare module 'next/app' {
      type AppPropsWithLayout&lt;P = {}&gt; = AppProps&lt;P&gt; &amp; {
          //emotionCache?: EmotionCache
          Component: Page;
      }
  }
  </code></pre>
  <p>I have below which is exported from _App.tsx
  (I have left some of the Recoil and MUI stuff in there so that you get the full picture).</p>
  <pre><code>// mui-app.tsx
  import { RecoilRoot } from 'recoil'
  
  import { useEffect, useState } from 'react';
  import Head from 'next/head';
  import { ThemeProvider } from '@mui/material/styles';
  import CssBaseline from '@mui/material/CssBaseline';
  import { CacheProvider, EmotionCache } from '@emotion/react';
  import theme from './theme';
  import createEmotionCache from './createEmotionCache';
  
  import { SessionProvider } from 'next-auth/react';
  
  import type { ReactNode} from 'react'
  import { AppPropsWithLayout } from 'next/app';
  
  
  interface MuiAppProps extends AppPropsWithLayout{
    emotionCache?: EmotionCache
  }
  
  // Client-side cache, shared for the whole session of the user in the browser.
  const clientSideEmotionCache = createEmotionCache();
  
  
  export function MuiApp(props: MuiAppProps):JSX.Element {
    const { Component, emotionCache = clientSideEmotionCache, pageProps: { session, ...pageProps } } = props;
    const getLayout = Component.getLayout ?? ((page: ReactNode): ReactNode =&gt; page)
    const [mounted, setMounted] = useState(false)
    useEffect(() =&gt; {
      setMounted(true)
    }, [])
    return (
      &lt;SessionProvider session={pageProps.session} refetchInterval={0}&gt;
        &lt;RecoilRoot&gt;
  
          &lt;CacheProvider value={emotionCache}&gt;
            &lt;Head&gt;
              &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1, width=device-width&quot; /&gt;
            &lt;/Head&gt;
            &lt;ThemeProvider theme={theme}&gt;
              {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
              &lt;CssBaseline /&gt;
              &lt;div style={{ visibility: mounted ? 'visible' : 'hidden' }}&gt;
                {getLayout(&lt;Component {...pageProps} /&gt;)}
              &lt;/div&gt;
            &lt;/ThemeProvider&gt;
          &lt;/CacheProvider&gt;
  
        &lt;/RecoilRoot&gt;
      &lt;/SessionProvider&gt;
    )
  }
  </code></pre>
  <p>This is my index.tsx</p>
  <pre><code>import React, { ReactNode } from &quot;react&quot;;
  import type { Page } from 'next'
  import { PageLayout } from &quot;@app/UI/MUI/components/layout/page-layout&quot;;
  
  const page: Page&lt;{ someText: string }&gt; = ({ someText }) =&gt; {
      return (
          &lt;div&gt;{someText}&lt;/div&gt;
      )
  }
  export default page
  page.getLayout = (page: Page) =&gt; {
      return (
          &lt;PageLayout&gt;{page}&lt;/PageLayout&gt;
      )
  }
  
  
  export const getServerSideProps = async () =&gt; {
  
      return ({ props: { someText: 'This is a test' } })
  
  }
  </code></pre>