#Understanding Next.js and NextUI

2 messages · Page 1 of 1 (latest)

lapis jasper
#

On the instruction of some Next.js documentation and the default Next.js app that gets created when running create-next-app, I have the following in layout.tsx:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Then, I have this in my root page.tsx:

'use client';

import { NextUIProvider } from "@nextui-org/react";
import MyClassComponent from "./my-class-component";

export default function Page() {
  return (
    <NextUIProvider>
      <main className="dark text-foreground bg-background">
        <span>
          <h3>Enter prompt</h3>
          <MyClassComponent />
        </span>
      </main>
    </NextUIProvider>
  );
}

My questions are:

  1. How do the page.tsx and layout.tsx intersect and work together? Is there a call hierarchy where one is calling the other? I know that page.tsx is a special filename in Next.js such that whatever is rendered by that component will be displayed on that page, but idk what the layout is doing. It feels like the layout is higher in the hierarchy than the page, meaning that it sets up the layout of every page within the directory and each page's component will take the place of {children}. Is that right?
  2. How does styling work with NextUI in this thing? On the recommendation of this page I wrote page.tsx like the above, but I'm not sure where the text color or background color are actually coming from. My background is currently white, not dark like the className would suggest.
lapis jasper