hey i need help

Unanswered

Netherland Dwarf posted this in #help-forum

Netherland DwarfOP

2026-03-30T10:06:08.282Z

i have recently learned next js and i just wanted to make a simple layout like this
but when i am making same thing in next js everything is collapsing and i dont know the reason
can anybody look ?
this is my layout code

return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-white text-gray-900 h-full`}
      >
        
        <div className="min-h-screen flex flex-col">
          <ClerkProvider>
         

          <header className="border border-black p-4">
            <h1 className="text-xl font-bold">Header</h1>
          </header>

          {/* Body */}
          <div className="flex flex-1">
            {/* Sidebar */}
            <aside className="w-64 border border-black p-4">
              <p>Sidebar</p>
            </aside>

            {/* Main Content */}
            <main className="flex-1 border border-black p-4">
              {children}
            </main>
          
          </div>
           </ClerkProvider> 
        </div>
       
      </body>
    </html>
  );
}

....and it looks like the second picture

23 Replies

@Netherland Dwarf i have recently learned next js and i just wanted to make a simple layout like this but when i am making same thing in next js everything is collapsing and i dont know the reason can anybody look ? this is my layout code jsx return ( <html lang="en"> <body className={`${geistSans.variable} ${geistMono.variable} antialiased bg-white text-gray-900 h-full`} > <div className="min-h-screen flex flex-col"> <ClerkProvider> <header className="border border-black p-4"> <h1 className="text-xl font-bold">Header</h1> </header> {/* Body */} <div className="flex flex-1"> {/* Sidebar */} <aside className="w-64 border border-black p-4"> <p>Sidebar</p> </aside> {/* Main Content */} <main className="flex-1 border border-black p-4"> {children} </main> </div> </ClerkProvider> </div> </body> </html> ); } ....and it looks like the second picture

Anay-208

2026-03-30T10:39:33.457Z

have you installed tailwind

it might not be configured properly

@Anay-208 have you installed tailwind

Netherland DwarfOP

2026-03-30T10:46:57.551Z

yes

it is configured properly

@Anay-208 have you installed tailwind

Netherland DwarfOP

2026-03-30T10:47:47.500Z

if u have time can you come to vc and look ?

@Netherland Dwarf if u have time can you come to vc and look ?

Anay-208

2026-03-30T10:57:26.880Z

not now, I'm available in <t:1774891800:R>

@Anay-208 not now, I'm available in <t:1774891800:R>

Netherland DwarfOP

2026-03-30T11:25:03.275Z

ok i will ping you after 6 hours

@Netherland Dwarf if u have time can you come to vc and look ?

Anay-208

2026-03-30T19:56:27.179Z

instead of this, send your globals.css

Nuitari

2026-03-31T09:28:57.855Z

im not sure if you use some linter but you should use one. The code you paste is wrong (comments are all wrong)

import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};
import { ClerkProvider, Show, SignInButton, SignUpButton, UserButton } from '@clerk/nextjs'
export default function RootLayout({ children }) {
  return (
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col">
        <div className="min-h-screen flex flex-col">
          <ClerkProvider>
          <header className="border border-black p-4">
            <h1 className="text-xl font-bold">Header</h1>
          </header>
          {/* Body */}
          <div className="flex flex-1">
            {/* Sidebar */}
            <aside className="w-64 border border-black p-4">
              <p>Sidebar</p>
            </aside>
            {/* Main Content */}
            <main className="flex-1 border border-black p-4">{children}</main>
          </div>
          </ClerkProvider>
        </div>
      </body>
    </html>
  );
}

that code works