5

I'm using the app router in Next.js 13 v13.1.1 and the layout.ts file is required. I'm using typescript, so I need to type the props of the RootLayout component. Does Next.js declare/export or otherwise imply the proptypes for the RootLayout component?

For more context about my specific situation:

I'm using next-auth to create a social login, and the SessionProvider component requires the Next.js session to achieve this. With a bit of experimentation, I realized that RootLayout exposes a managed session in the props, which the SessionProvider component can use to do all the cool next-auth things.

So naturally, I did this:

import { ReactNode } from 'react';
import { Session } from 'next-auth';
import SessionInitializer from './SessionInitializer';

interface RootLayoutProps {
   children: ReactNode;
   session: undefined | null | Session;
}

export default function RootLayout(props: RootLayoutProps) {
   const { children, session } = props;

   return (
      <html>
         <SessionInitializer session={session}>
            <div>{ children }</div>
         </SessionInitializer>
      </html>
   )
}

where SessionInitializer is a simple client-side component, as so:

"use client";
import { SessionProvider } from 'next-auth';

interface SessionInitializerProps {
   children: ReactNode;
   session: undefined | null | Session;
}

export default function SessionInitializer(props: SessionInitializerProps) {
   return (
      <SessionProvider session={session}>
         { children }
      </Session>
   )
}

This works perfectly well on the next dev server, but won't build because my session isn't typed properly. In particular, the linting stage complains that the RootLayout component I'm exporting from layout.ts isn't the correct type.

Here's a simplified form of my exact error:

...
app/layout.tsx
Type error: Layout "app/layout.tsx" has an invalid "default" export:
Type "RootLayoutProps" is not valid.
ELIFECYCLE  Command failed with exit code 1.
ERROR: command finished with error: command (absolute-path-to-root-of-next-project) pnpm run build exited (1)
...

So yeah, can anyone point me to a document or source-code that can assist me in typing the RootLayout component's props, or otherwise suggest a better way of typing my component? I already know that my RootLayoutProps can't possibly be correct, given that I'm typing it using a type from a 'random' 3rd party library.

Thanks in advance for the help, friend.

Jatniel
  • 1,967
  • 2
  • 19
  • 27
imfromthefuture
  • 79
  • 7
  • 1
    Does this answer your question? [What TypeScript type should NextJS \_app.tsx Component and pageProps be?](https://stackoverflow.com/questions/64722812/what-typescript-type-should-nextjs-app-tsx-component-and-pageprops-be) – Camilo Apr 26 '23 at 01:50
  • 1
    @Camilo thanks for the resource. Unfortunately, that link discusses how to type the props of the root component from Next12 (_App.ts). Even then, I looked at how the session is typed for AppProps, and unfortunately, even today pageProps are of type any. I'm currently exploring a way to type the session by querying the next-auth api (which is easy in Next13 because of async components) so maybe that will solve my immediate problem. I'm following [this](https://blog.bitsrc.io/adding-nextauth-to-nextjs-13-and-authenticating-with-github-40539ca6a81c) article. Still, the original question stands. – imfromthefuture Apr 26 '23 at 03:13
  • I realized that RootLayout is not supposed to take any props, except children. What I was attempting to do is best suited for an async serverside component. You can get nextauth session using the experimental (as of this writing) getServerSession() function that takes authOptions from next-auth. Then you can initialize the session like the question above. Best wishes to whoever needed this. – imfromthefuture May 14 '23 at 20:35

0 Answers0