Problem with adding per-page layout in /pages router using typescript

// eslint-disable-next-line @typescript-eslint/ban-types
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) => page);
// const layout = getLayout(<Component {...pageProps} />);

return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
);
};

export default api.withTRPC(MyApp);
// eslint-disable-next-line @typescript-eslint/ban-types
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) => page);
// const layout = getLayout(<Component {...pageProps} />);

return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
);
};

export default api.withTRPC(MyApp);
It throws an error: session "any" type
1 Reply
kevalmiistry
kevalmiistry16mo ago
This is how wanna do it: _app.tsx
// all imports....

// eslint-disable-next-line @typescript-eslint/ban-types
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppType &
AppProps<{ session: Session | null }> & {
Component: NextPageWithLayout
}

const MyApp = ({
Component,
pageProps: { session, ...pageProps },
}: AppPropsWithLayout) => {
const getLayout =
Component.getLayout ??
((page) => (
<SessionProvider session={session}>
<SidebarAndProfile>{page}</SidebarAndProfile>
</SessionProvider>
))

return getLayout(<Component {...pageProps} />)
}

export default api.withTRPC(MyApp)
// all imports....

// eslint-disable-next-line @typescript-eslint/ban-types
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppType &
AppProps<{ session: Session | null }> & {
Component: NextPageWithLayout
}

const MyApp = ({
Component,
pageProps: { session, ...pageProps },
}: AppPropsWithLayout) => {
const getLayout =
Component.getLayout ??
((page) => (
<SessionProvider session={session}>
<SidebarAndProfile>{page}</SidebarAndProfile>
</SessionProvider>
))

return getLayout(<Component {...pageProps} />)
}

export default api.withTRPC(MyApp)
The layout
<SidebarAndProfile>
<SidebarAndProfile>
will be applied to all routes and for the page you want no default layout or custom layout:
import type { ReactElement } from "react"
import type { NextPageWithLayout } from "../_app"

interface Iindex {}
const Welcome: NextPageWithLayout<Iindex> = () => {
return <>this is landing page</>
}

Welcome.getLayout = function getLayout(page: ReactElement) {
return (
<>
// <CustomLayout />
{page}
</>
)
}

export default Welcome
import type { ReactElement } from "react"
import type { NextPageWithLayout } from "../_app"

interface Iindex {}
const Welcome: NextPageWithLayout<Iindex> = () => {
return <>this is landing page</>
}

Welcome.getLayout = function getLayout(page: ReactElement) {
return (
<>
// <CustomLayout />
{page}
</>
)
}

export default Welcome
This file will not have any default layout, In my case
<SidebarAndProfile>
<SidebarAndProfile>
Want results from more Discord servers?
Add your server