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);
1 Reply
This is how wanna do it:
_app.tsx
The layout will be applied to all routes and for the page you want no default layout or custom layout:
This file will not have any default layout, In my case
// 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)
<SidebarAndProfile>
<SidebarAndProfile>
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
<SidebarAndProfile>
<SidebarAndProfile>