Next.js Discord

Discord Forum

Root component in Next.js

Unanswered
Ocicat posted this in #help-forum
Open in Discord
OcicatOP
Hello. I'm using a template from 
npx create-next-app@latest my-app --typescript --tailwind --eslint


I've been developing the project for a while and I'm confused because I don't have _app.tsx like most next.js apps seem to have. I have RootLayout component: 
export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en"
      suppressHydrationWarning>
      <head />
      <body
        className={cn(
          'min-h-screen bg-background font-sans antialiased',
          fontSans.variable
        )}
      >
        <ThemeProvider attribute="class"
          defaultTheme="system"
          enableSystem>
          <div className="relative flex min-h-screen flex-col">
            <div className="flex-1">{children}</div>
          </div>
          <TailwindIndicator />
        </ThemeProvider>
      </body>
    </html>
  )
}


Another layout (is it below the root layout?):
export function Layout({ children }: LayoutProps) {
  return (
    <div>
      <SiteHeader />
      <main>{children}</main>
    </div>
  )
}


And I just added an actual _app.tsx by myself, because I need a place to wrap providers around: 
export default function MyApp({Component, pageProps}: any) {
  const getLayout = Component.getLayout || (
    (page: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode | null | undefined) =>
      <RootLayout>{page}</RootLayout>
  )

  return getLayout(<Component {...pageProps} />)
}


Can you help me understand how the order of those component work and whether this _app.tsx would actually work right now?

0 Replies