TTC
Theo's Typesafe Cult•3y ago
Perfect

NextJS Per Page Layouts

So I got per page layouts working (using pages directory method) following the docs, but I cannot figure out how this is working for the life of me. Can anyone explain the types and the general idea of what is going on here? I would highly appreciate it. Thanks
5 Replies
Perfect
PerfectOP•3y ago
Also, if I do not use the Record string, unknown thing, I get these errors. What are these generics?
Perfect
PerfectOP•3y ago
Perfect
PerfectOP•3y ago
Bump Bump
Unknown User
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
jeff.kershner
jeff.kershner•2y ago
This works: 
import type { ReactElement, ReactNode } from 'react';
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";

import { api } from "~/utils/api";

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 api.withTRPC(MyApp);
import type { ReactElement, ReactNode } from 'react';
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";

import { api } from "~/utils/api";

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 api.withTRPC(MyApp);

Did you find this page helpful?