Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// Typical App Router directory structure
//
// app/
// ├── layout.tsx          <- root layout, rendered for every route
// ├── page.tsx            <- home page  /
// ├── globals.css
// ├── (marketing)/        <- route group (no URL impact)
// │   ├── about/
// │   │   └── page.tsx    <- /about
// │   └── blog/
// │       ├── layout.tsx  <- layout for /blog/**
// │       ├── page.tsx    <- /blog
// │       └── [slug]/
// │           └── page.tsx <- /blog/:slug
// ├── dashboard/
// │   ├── layout.tsx      <- layout wrapping all dashboard routes
// │   ├── page.tsx        <- /dashboard
// │   ├── loading.tsx     <- Suspense fallback for dashboard
// │   ├── error.tsx       <- error boundary for dashboard
// │   └── settings/
// │       └── page.tsx    <- /dashboard/settings
// └── api/
//     └── users/
//         └── route.ts    <- Route Handler at /api/users

// app/layout.tsx - root layout example
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}