What's wrong with my Next Auth and Layout code
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import { type AppType, type AppProps } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { trpc } from "../utils/trpc";
import "../styles/globals.css";
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)
return (
getLayout(<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>)
);
};
export default trpc.withTRPC(MyApp);
6 Replies
const MyApp: AppType<{
session: Session | null;
}>
Type '({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) => ReactNode' is not assignable to type 'AppType<{ session: Session | null; }>'.
Type '({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) => ReactNode' is not assignable to type 'FunctionComponent<AppPropsType<any, { session: Session | null; }>> & { getInitialProps?(context: AppContextType<NextRouter>): { ...; } | Promise<...>; }'.
Type '({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) => ReactNode' is not assignable to type 'FunctionComponent<AppPropsType<any, { session: Session | null; }>>'.
Type 'ReactNode' is not assignable to type 'ReactElement<any, any> | null'.
Type 'undefined' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
thats an understatement
Sickkk i got it working thanks dude! :D
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import { type AppType, type AppProps } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { trpc } from "../utils/trpc";
import "../styles/globals.css";
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}>
{layout}
</SessionProvider>
);
};
export default trpc.withTRPC(MyApp);
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
@Koki pls follow @k8s lover implementation of NextPageWithLayout type definition
export type NextPageWithLayout = NextPage & {
/* eslint-disable no-unused-vars */
getLayout?: (page: ReactElement) => ReactNode;
};
mine gave me errors in deployment