kevalmiistry Comments - Answer Overflow

kevalmiistry

•Created by iboughtbed on 7/3/2023 in #questions

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

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>

3 replies

TTCTheo's Typesafe Cult

•Created by kevalmiistry on 7/10/2023 in #questions

Is there any way gSSP in T3 stack

Thank you so much for the lead! Now I'm able to use gSSP to server render page in T3. Again Thank You 🙂

5 replies

Gaming

Programming