Theo's Typesafe Cult•3y ago

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

PerfectOP•3y ago

Also, if I do not use the Record string, unknown thing, I get these errors. What are these generics?

PerfectOP•3y ago

PerfectOP•3y ago

Bump Bump

Unknown User•3y ago

Message Not Public

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);

Gaming

Programming

NextJS Per Page Layouts