Dear community, I am facing a challenge with integrating NextJS Layout and Typescript. Although everything seems to be working fine, I can't seem to get rid of the squiggly line under the props when passing them from getServerSideProps.
The prop {someText) always shows an annoying squiggle - you can check the screenshot for reference.
I understand that I cannot pass these props directly to the Layout itself, but according to my knowledge, I should be able to pass them to the page itself... and the code does function correctly!
I've spent quite some time trying to fix this issue... hoping someone in this forum can guide me in the right direction :)
For now, I am using {someText}:any as a workaround.
This is my next.d.ts file:
import type { NextPage } from 'next';
import NextComponentType from 'next/dist/shared/lib/utils'
import type { AppProps } from 'next/app';
declare module 'next' {
type Page<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (Component: NextComponentType) => JSX.Element;
}
}
declare module 'next/app' {
type AppPropsWithLayout<P = {}> = AppProps<P> & {
Component: Page;
}
}
Below is what I have exported from _App.tsx (includes Recoil and MUI components):
// 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 => page)
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
}, [])
return (
<SessionProvider session={pageProps.session} refetchInterval={0}>
<RecoilRoot>
<CacheProvider value={emotionCache}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
<CssBaseline />
<div style={{ visibility: mounted ? 'visible' : 'hidden' }}>
{getLayout(<Component {...pageProps} />)}
</div>
</ThemeProvider>
</CacheProvider>
</RecoilRoot>
</SessionProvider>
)
}
This is my index.tsx file:
import React, { ReactNode } from "react";
import type { Page } from 'next'
import { PageLayout } from "@app/UI/MUI/components/layout/page-layout";
const page: Page<{ someText: string }> = ({ someText }) => {
return (
<div>{someText}</div>
)
}
export default page
page.getLayout = (page: Page) => {
return (
<PageLayout>{page}</PageLayout>
)
}
export const getServerSideProps = async () => {
return ({ props: { someText: 'This is a test' } })
}