Creating Layouts and Pages

In the App Router, folders under app define your URLs. A page.tsx file makes that folder a route. A layout.tsx wraps every page in that folder (and nested folders) with shared UI — nav, footer, sidebar.

Shared layout — one shell for many pages

The root layout lives at app/layout.tsx. It must include <html> and <body>. Child layouts nest inside it like Russian dolls.

Real-life example: A layout is the building lobby and elevators. Pages are different offices on each floor. You reuse the lobby; you do not rebuild it for every room.

app/layout.tsx — root shell (required)
app/page.tsx — home route /
Nested layout.tsx only wraps that segment

Tip: Put logos, nav, and fonts in the layout. Put page-specific content in page.tsx so navigation feels instant — the shell stays mounted.

Request → layout → page

layout.tsx + page.tsx — first routes

Every route segment can have its own layout and page. Children of a layout arrive as the children prop — that is where Next.js inserts the active page (or nested layout).

Real-life example: children is the stage area in a theater. The curtains and seats (layout) stay; the play (page) changes.

app/layout.tsx — root layout

import type { ReactNode } from "react";
import "./globals.css";

export const metadata = {
  title: "Rishtaara Learn",
  description: "Next.js App Router course",
};

export default function RootLayout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <header>
          <strong>Rishtaara</strong>
          <nav>Home · Courses · Blog</nav>
        </header>
        <main>{children}</main>
        <footer>© Rishtaara</footer>
      </body>
    </html>
  );
}

app/page.tsx — home page

export default function HomePage() {
  return (
    <section>
      <h1>Welcome to Rishtaara</h1>
      <p>Learn Next.js with simple English and real projects.</p>
    </section>
  );
}

Nested layouts — dashboard example

Dashboard routes often share a sidebar. Put layout.tsx inside app/dashboard so every dashboard page gets the sidebar automatically.

URLs map to folders: app/dashboard/page.tsx → /dashboard, app/dashboard/settings/page.tsx → /dashboard/settings.

Real-life example: Nested layout is a hospital wing — the wing has its own corridor signs (sidebar), while the whole hospital still shares the main entrance (root layout).

Tip: Layouts do not remount on navigation between their child pages. That is why dashboards feel snappy — only the page content swaps.

app/dashboard/layout.tsx

import type { ReactNode } from "react";
import Link from "next/link";

export default function DashboardLayout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <div style={{ display: "flex", gap: "1.5rem" }}>
      <aside>
        <h2>Dashboard</h2>
        <ul>
          <li>
            <Link href="/dashboard">Overview</Link>
          </li>
          <li>
            <Link href="/dashboard/settings">Settings</Link>
          </li>
          <li>
            <Link href="/dashboard/courses">Courses</Link>
          </li>
        </ul>
      </aside>
      <section>{children}</section>
    </div>
  );
}

app/dashboard/page.tsx + settings/page.tsx

// app/dashboard/page.tsx
export default function DashboardHome() {
  return <h1>Overview — your Rishtaara progress</h1>;
}

// app/dashboard/settings/page.tsx
export default function SettingsPage() {
  return <h1>Account settings</h1>;
}

Folder tree

app/
  layout.tsx          # root: html, body, site nav
  page.tsx            # /
  dashboard/
    layout.tsx        # sidebar for all /dashboard/*
    page.tsx          # /dashboard
    settings/
      page.tsx        # /dashboard/settings
    courses/
      page.tsx        # /dashboard/courses