Layout ของแอป — Container, Navbar และ app/layout.tsx

Next.js      16.3.5 (Turbopack)   # บรรทัดแรกของ npx next build
react        19.2.8
typescript   5.9.3
tailwindcss  4.3.3
node         v24.14.0
โปรเจกต์     create-next-app + shadcn init (preset base-nova) + button card badge skeleton

Layout คืออะไร — แบ่งหน้าเป็นส่วนที่ "อยู่ทุกหน้า" กับส่วนที่ "เปลี่ยนไปตามหน้า"

เปิดเว็บไหนก็ได้ที่คุณใช้ทุกวัน แล้วกดไปสักสามหน้า จะสังเกตว่าแถบบนสุดกับท้ายหน้าไม่เคยเปลี่ยน สิ่งที่เปลี่ยนมีแค่ตรงกลาง
สไลด์หน้า 35 วาดโครงนี้ไว้เป็นกล่องสี่กล่อง:

แล้วหน้า 36–37 เอาแบบร่างของ Wongnok มาวางทับให้ดูว่าแต่ละกล่องกลายเป็นอะไร: แถบบน = โลโก้ W Wongnok + ลิงก์ Home · Recipes + ช่องค้นหา + ปุ่ม Sign in · ตรงกลาง = page content · ท้ายหน้าสีดำ = คอลัมน์ Explore / Account / Legal
สังเกตว่า Wongnok ไม่มี Sidebar — กล่องสี่กล่องในหน้า 35 เป็นแม่แบบ ไม่ใช่ข้อบังคับ แอปส่วนใหญ่ใช้แค่สามส่วน

อีกเรื่องที่เห็นในหน้า 37 แต่สไลด์ไม่ได้พูด: ขอบซ้ายของโลโก้ ขอบซ้ายของเนื้อหา และขอบซ้ายของ footer ตรงกันเป๊ะ ทั้งที่พื้นหลังของแถบบนกับ footer ยาวเต็มจอ — นี่คืองานของ Container ที่เราจะเขียนในหัวข้อถัดไป

Container — component ที่สไลด์ใช้ แต่ไม่ได้เขียนให้ดู

โค้ด Navbar ในสไลด์หน้า 39 บรรทัด 18 เรียก <Container className="...">
ผมไล่ดูสไลด์หน้า 33–40 ครบทุกหน้าแล้ว ไม่มีหน้าไหนนิยาม Container ไว้ และ shadcn ที่ติดตั้งในโปรเจกต์ (button · card · badge · skeleton) ก็ไม่มีตัวนี้ — ถ้าก็อปโค้ดสไลด์ไปวางเฉย ๆ จะ build ไม่ผ่านเพราะหา Container ไม่เจอ

ข่าวดีคือมันเป็น component ที่ง่ายที่สุดในแอปทั้งแอป — <div> หนึ่งตัวที่มีสามหน้าที่:

// components/layout/Container.tsx  (ผมเขียนเอง — สไลด์ไม่ได้ให้มา)
import { cn } from "@/lib/utils";

export function Container({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      className={cn("mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", className)}
      {...props}
    />
  );
}

ทำไมรับ className แล้วส่งผ่าน cn()? เพราะคนเรียกต้องเติมของเพิ่มได้ — Navbar เติม flex h-16 items-center ... · footer เติม grid py-10
cn() รวม class สองชุดเข้าด้วยกันและตัดตัวที่ชนกันทิ้งให้เหลือตัวหลัง (ในโปรเจกต์นี้ lib/utils.ts มีบรรทัดเดียวคือ export { cn } from "cn" — shadcn ติดตั้งให้) · ผลรันจริงด้วย node ใส่ class ของ Container แล้วตามด้วย "px-8 flex h-16": "mx-auto w-full max-w-7xl sm:px-6 lg:px-8 px-8 flex h-16" — px-4 หายไป เหลือ px-8 ตัวหลัง · ส่วน ...props ทำให้ส่ง id · aria-* อะไรก็ได้ที่ <div> รับ (เรื่อง box model · padding · margin ทบทวนได้ที่ บท 60)

ถอดโค้ด Navbar จากสไลด์หน้า 39

นี่คือโค้ดตามสไลด์ทุกตัวอักษรตั้งแต่บรรทัด 12 ถึง 43 ส่วนที่สไลด์ตัดทิ้ง ผมเติมให้ครบพอ build ได้ และติดป้ายไว้ทุกจุดที่ผมเติมเอง:

// components/layout/Navbar.tsx
// ── บรรทัด 1–11 สไลด์ไม่ได้โชว์ · ผมเติมเท่าที่โค้ดข้างล่างต้องใช้ ──
import Link from "next/link";

import { Container } from "@/components/layout/Container";
import { cn } from "@/lib/utils";

const NAV_LINKS = [
  { href: "/", label: "Home", active: true },          // ← ผมเดาว่า active มาจากตรงนี้
  { href: "/recipes", label: "Recipes", active: false },
];
// ── จากนี้ไปตรงกับสไลด์ ──

function Navbar() {
  return (
    <header
      data-slot="navbar"
      className="fixed inset-x-0 top-0 z-50 border-b border-border-subtle bg-card"
    >
      <Container className="flex h-16 items-center justify-between gap-6">
        <div className="flex items-center gap-6">
          <Link href="/" className="flex shrink-0 items-center gap-2">
            <span className="wongnok-text-base flex size-8.5 items-center justify-center rounded-lg bg-linear-135 from-primary to-primary-hover font-bold text-primary-foreground">
              W
            </span>
            <span className="wongnok-text-h3 font-bold tracking-tight text-foreground">
              Wongnok
            </span>
          </Link>

          <nav
            aria-label="Main"
            className="hidden items-center gap-1 lg:flex"
          >
            {NAV_LINKS.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                aria-current={link.active ? "page" : undefined}
                className={cn(
                  "wongnok-text-sm rounded-md px-3.5 py-2 font-medium transition-colors",
                  link.active
                    ? "text-primary"
                    : "text-secondary-foreground hover:bg-muted",
                )}
              >
                {link.label}
              </Link>
            ))}
          </nav>
        </div>
        {/* สไลด์ตัดจบที่บรรทัด 43 · ช่องค้นหากับปุ่ม Sign in (เห็นในภาพหน้า 36) ไม่ได้โชว์โค้ด */}
      </Container>
    </header>
  );
}

export default Navbar;

ผลตรวจจริงของไฟล์นี้ (ใส่ใน app/layout.tsx แล้ว — วิธีใส่อยู่หัวข้อท้าย ๆ):

$ npx next build
Route (app)
┌ ○ /
├ ○ /_not-found
└ ○ /recipes

$ npx tsc --noEmit; echo "tsc rc=$?"
tsc rc=0
$ npx eslint .; echo "eslint rc=$?"
eslint rc=0

.fixed                    .fixed{position:fixed}
.lg\:flex                 .lg\:flex{display:flex}
.from-primary             .from-primary{--tw-gradient-from:var(--primary);...
.size-8\.5                .size-8\.5{width:calc(var(--spacing) * 8.5);...
.wongnok-text-base        NOT FOUND
.wongnok-text-sm          NOT FOUND
.wongnok-text-h3          NOT FOUND
.border-border-subtle     NOT FOUND
.to-primary-hover         NOT FOUND

กับดักที่ 1 — fixed top-0 แล้วหัวข้อแรกของหน้าหายไปใต้แถบเมนู

fixed สั่งให้กล่องหลุดออกจากลำดับการวางของหน้า แล้วไปติดอยู่กับหน้าต่างเบราว์เซอร์แทน
ปกติกล่องบนหน้าเว็บวางต่อกันลงมาเหมือนตัวต่อ — กล่องแรกกินที่เท่าไหร่ กล่องถัดไปก็เลื่อนลงเท่านั้น (ดูเรื่อง "กินที่" ใน บท 60)
แต่พอเป็น position: fixed กล่องนั้นไม่กินที่ในลำดับอีกต่อไป — กล่องถัดไปจึงขยับขึ้นมาแทนที่ราวกับว่าไม่มี Navbar อยู่ แล้ว Navbar ก็ลอยทับอยู่ข้างบน (z-50 คือบอกว่า "ลอยอยู่ชั้นบน")

พิสูจน์ด้วยหน้าจริง: หน้า / มีแค่ <h1>HOME PAGE</h1> · <main> ยังไม่ใส่ padding อะไร · เปิดที่จอกว้าง 1280px แล้ววัด:

// วัดในเบราว์เซอร์ด้วย getBoundingClientRect() · elementFromPoint()
{
  "innerWidth": 1280,
  "header": { "top": 0, "bottom": 65, "height": 65 },
  "h1":     { "top": 0, "bottom": 24, "left": 0 },
  "elementAtH1": "inside HEADER"
}

h1 เริ่มที่ 0 จบที่ 24 — อยู่ใต้ header ที่กินพื้นที่ 0 ถึง 65 ทั้งตัว
และ elementFromPoint (ถามเบราว์เซอร์ว่า "ถ้าคลิกตรงหัวข้อ จะโดนอะไร") ตอบว่าโดน header — ผู้ใช้มองไม่เห็นและคลิกไม่โดนหัวข้อแรกของทุกหน้า

วิธีแก้ที่ตรงที่สุดคือเว้นที่ด้านบนของเนื้อหาเท่ากับความสูงของ Navbar · Navbar สูง h-16 = 16 × 0.25rem = 4rem = 64px ก็เลยใส่ pt-16 ที่ <main>

// app/layout.tsx
<main className="pt-16">{children}</main>

// จากการวัดข้างบน: header สูง 65px (ไม่ใช่ 64)

{
  "mainClass": "pt-16",
  "header": { "bottom": 65 },
  "h1":     { "top": 64, "bottom": 88 }
}

กับดักที่ 2 — hidden lg:flex แล้วเมนูหายไปบนมือถือ

อ่าน class นี้จากซ้ายไปขวา: "ปกติซ่อน · พอจอกว้างถึง lg แล้วค่อยแสดงเป็น flex"
Tailwind คิดแบบ mobile-first — class ที่ไม่มีคำนำหน้าใช้กับทุกขนาดจอ ส่วน lg: แปลว่า "ตั้งแต่ขนาดนี้ขึ้นไป" · CSS จริงที่ Tailwind สร้างให้:

.hidden{display:none}
...
@media (min-width:64rem){ ... .lg\:flex{display:flex} ... }

64rem = 1024px · ผลวัดจริงบนเบราว์เซอร์:

สไลด์หน้า 36 มีข้อความเล็ก ๆ ในแบบร่างว่า "resize to see mobile drawer" — แปลว่าตัวออกแบบมีเมนูแบบลิ้นชักไว้แทนบนมือถือ แต่โค้ดที่สไลด์หน้า 39 โชว์ไม่มีลิ้นชักนั้น · ถ้าคุณหยุดที่โค้ดในสไลด์ แอปของคุณใช้บนมือถือไม่ได้ ต้องรู้ไว้ว่านี่คือ "งานที่ยังค้าง" ไม่ใช่ "เสร็จแล้ว" (เรื่อง display ทบทวนได้ที่ บท 61)

กับดักที่ 3 — link.active มาจากไหน?

สไลด์บรรทัด 37 และ 40 ใช้ link.active ตัดสินว่าลิงก์ไหนเป็นสีหลักและได้ aria-current="page"
แต่บรรทัด 1–11 ที่ประกาศ NAV_LINKS ถูกตัดไป — สไลด์ไม่ได้บอกว่า active คำนวณจากอะไร
ผมเขียนแบบที่ตรงไปตรงมาที่สุดคือใส่ active: true ไว้ที่ Home ในอาร์เรย์ · build ผ่าน หน้าตาเหมือนสไลด์หน้า 40 (Home เป็นสีหลัก) · แล้วลองกดไปหน้า Recipes:

$ curl -s http://localhost:383/recipes | grep -o '<a aria-current="page"[^>]*>[A-Za-z]*</a>'
<a aria-current="page" class="wongnok-text-sm rounded-md px-3.5 py-2 font-medium transition-colors text-primary" href="/">Home</a>

อยู่หน้า Recipes แท้ ๆ แต่ Home ยังเป็นลิงก์ที่ "active" — เพราะ true ที่เขียนไว้ในอาร์เรย์ไม่รู้เรื่องว่าตอนนี้ URL คืออะไร
โปรแกรมอ่านหน้าจอ (screen reader) อ่าน aria-current ตัวนี้ จึงจะบอกผู้ใช้ผิดว่า Home คือหน้าปัจจุบัน

แก้ให้ถูกตาม URL จริง: ลบ active ออกจากอาร์เรย์ แล้วคำนวณจาก usePathname() แทน

// components/layout/Navbar.tsx — ไม่ได้แตะบรรทัดบนสุด
import Link from "next/link";
import { usePathname } from "next/navigation";
// ...
const NAV_LINKS = [
  { href: "/", label: "Home" },
  { href: "/recipes", label: "Recipes" },
];

function Navbar() {
  const pathname = usePathname();
  // ... ใน map: const active = pathname === link.href;

▲ Next.js 16.3.5 (Turbopack)
✓ Running next.config.ts took 59ms

  Creating an optimized production build ...

> Build error occurred
Error: Turbopack build failed with 1 error:
./components/layout/Navbar.tsx:2:10
Error: You're importing a module that depends on `usePathname` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.
    Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
  1 | import Link from "next/link";
> 2 | import { usePathname } from "next/navigation";
    |          ^^^^^^^^^^^
  3 |
  4 | import { Container } from "@/components/layout/Container";
  5 | import { cn } from "@/lib/utils";

Ecmascript file had an error

Import trace:
  Server Component:
    ./components/layout/Navbar.tsx
    ./app/layout.tsx

$ curl -s http://localhost:383/recipes | grep -o '<a aria-current="page"[^>]*>[A-Za-z]*</a>'
<a aria-current="page" class="... text-primary" href="/recipes">Recipes</a>
$ curl -s http://localhost:383/ | grep -o '<a aria-current="page"[^>]*>[A-Za-z]*</a>'
<a aria-current="page" class="... text-primary" href="/">Home</a>

กับดักที่ 4 — <Link> กับ <a> ออกมาเป็น HTML เหมือนกันเป๊ะ แล้วต่างกันตรงไหน

ดู HTML ที่ server ส่งมา ลิงก์ Home ออกมาเป็น <a ... href="/">Home</a> ธรรมดา ไม่มีอะไรบอกว่ามาจาก <Link> เลย · ความต่างอยู่ที่ตอนกด

ทดลอง: ก่อนกด ผมแปะตัวแปรไว้ในหน้าต่างเบราว์เซอร์ window.__marker = 'still-here' · ถ้าเบราว์เซอร์โหลดหน้าใหม่ทั้งหน้า JavaScript ทุกอย่างถูกล้าง ตัวแปรนี้จะหายไป

{
  "url": "/recipes",
  "h1": "RECIPES PAGE",
  "marker": "still-here"
}

{
  "url": "/",
  "h1": "HOME PAGE",
  "marker": "GONE (page reloaded)"
}

<Link> ดักการคลิกไว้ แล้วให้ Next.js ไปขอเฉพาะส่วนของหน้าที่เปลี่ยนมาเปลี่ยนแทน — Navbar · footer · state ที่อยู่ใน layout ไม่ถูกแตะ
<a> ธรรมดาปล่อยให้เบราว์เซอร์ทำแบบดั้งเดิม: ขอ HTML ใหม่ทั้งหน้า โหลด JavaScript ใหม่ทั้งหมด · state ทุกตัวในแอปกลับไปเป็นค่าเริ่มต้น (เช่น ถ้าช่องค้นหาใน Navbar เก็บคำที่พิมพ์ไว้ใน useState คำนั้นก็หาย)

และมีตัวที่จับให้ด้วย — eslint ของ create-next-app ถือว่าใช้ <a> ไปหน้าในแอปเป็น error (ไฟล์ทดลองคือ app/recipes/page.tsx ที่บรรทัด 5 มี <a id="plain" href="/">plain a</a>):

$ npx eslint app/recipes/page.tsx

# eslint พิมพ์ path เต็มของไฟล์ในบรรทัดนี้ ผมย่อเหลือส่วนท้าย
.../app/recipes/page.tsx
  5:7  error  Do not use an `<a>` element to navigate to `/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages  @next/next/no-html-link-for-pages

✖ 1 problem (1 error, 0 warnings)

(next build ผ่านนะ — ถ้าคุณรันแค่ build จะไม่มีวันรู้ · ลิงก์ไปเว็บข้างนอกใช้ <a> ได้ปกติ)

ใส่ Navbar ลงใน app/layout.tsx — สไลด์หน้า 40

สไลด์หน้า 40 เขียนไว้ประโยคเดียว: Integrate into /app/layout.tsx file to setup root layout พร้อมภาพผลลัพธ์ แต่ไม่ได้โชว์โค้ด · นี่คือ app/layout.tsx ที่ผมใช้ ส่วนที่เพิ่มจากไฟล์ที่ create-next-app สร้างให้มีแค่สามบรรทัดที่มีคอมเมนต์:

// app/layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import Navbar from "@/components/layout/Navbar";   // ← เพิ่ม
import "./globals.css";

// ... geistSans · geistMono · metadata เหมือนเดิมทุกตัวอักษร ...

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col">
        <Navbar />                                     {/* ← เพิ่ม */}
        <main className="pt-16">{children}</main>          {/* ← เพิ่ม: เว้นที่ให้ Navbar */}
      </body>
    </html>
  );
}

บท 70 พิสูจน์ไว้แล้วด้วยปุ่มนับเลขว่า layout ไม่ถูกวาดใหม่ตอนเปลี่ยนหน้า · ครั้งนี้ผมเช็คกับ Navbar ตัวจริงอีกรอบด้วยวิธีที่ตรงกว่า — เก็บ element <header> ไว้ในตัวแปร กดลิงก์ Recipes แล้วเทียบว่ายังเป็นตัวเดิมไหม:

// Navbar เวอร์ชัน usePathname · เริ่มที่หน้า /
{
  "before": "Home",              // aria-current อยู่ที่ Home
  "after": "Recipes",            // กดแล้วย้ายไป Recipes เอง
  "url": "/recipes",
  "marker": "still-here",
  "sameHeaderNode": true          // <header> คือ element ตัวเดิม ไม่ได้สร้างใหม่
}

ผลนี้บอกสองอย่างพร้อมกัน: Navbar อยู่ที่เดิม (element ตัวเดิม) แต่ อัปเดตตัวเองได้ (aria-current ย้ายตาม URL) — เพราะ usePathname() คืนค่าใหม่เมื่อ URL เปลี่ยน แล้ว React แก้เฉพาะส่วนที่ต่างไปบน element ตัวเดิม
นี่คือเหตุผลที่ Navbar ควรอยู่ใน layout ไม่ใช่ก็อปไปวางในทุก page.tsx — ตารางใน บท 70 บอกไว้แล้วว่า page "ถูกแทนที่ด้วยหน้าใหม่" ตอนเปลี่ยนหน้า ของที่อยู่ใน page ก็ถูกแทนที่ไปด้วย

ภารกิจ — ปิดโครงหน้าให้ครบด้วย Footer

// components/layout/Footer.tsx
import Link from "next/link";

import { Container } from "@/components/layout/Container";

const FOOTER_COLUMNS = [
  {
    title: "Explore",
    links: [
      { href: "/recipes", label: "Recipes" },
      { href: "/favorites", label: "Favorites" },
      { href: "/recipes/create", label: "Create Recipe" },
    ],
  },
  {
    title: "Account",
    links: [
      { href: "/sign-in", label: "Sign in" },
      { href: "/profile", label: "Profile" },
      { href: "/my-recipes", label: "My Recipes" },
    ],
  },
];

function Footer() {
  return (
    <footer data-slot="footer" className="mt-auto bg-zinc-900 text-zinc-300">
      <Container className="grid gap-8 py-10 lg:grid-cols-3">
        <div>
          <p className="font-bold text-white">Wongnok</p>
          <p className="text-sm">Share your recipe, inspire a meal.</p>
        </div>

        {FOOTER_COLUMNS.map((column) => (
          <div key={column.title}>
            <p className="text-xs font-bold uppercase text-white">{column.title}</p>
            <ul className="mt-3 space-y-2 text-sm">
              {column.links.map((link) => (
                <li key={link.href}>
                  <Link href={link.href} className="hover:text-white">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </Container>
    </footer>
  );
}

export default Footer;

// app/layout.tsx — ใน <body>
<Navbar />
<main className="pt-16">{children}</main>
<Footer />

$ npx next build
Route (app)
┌ ○ /
├ ○ /_not-found
└ ○ /recipes

$ npx tsc --noEmit; echo "tsc rc=$?"
tsc rc=0
$ npx eslint .; echo "eslint rc=$?"
eslint rc=0

# วัดหน้า /recipes (มีแค่ h1 บรรทัดเดียว) บนจอ 1280×800
มี mt-auto   →  footer { top: 616, bottom: 800 }   innerHeight: 800
เอา mt-auto ออก →  footer { top: 88,  bottom: 272 }

ลองตอบดู

ถามกลับได้เลย

ถ้าเปิดแอปแล้ว Navbar ของคุณหน้าตาไม่เหมือนสไลด์หน้า 40 — สีไม่ออก เส้นขอบหาย โลโก้ไม่ไล่สี — เอา app/globals.css มาคุยกัน ส่วนใหญ่เป็นเพราะ token ของ Wongnok ยังไม่ได้ประกาศ
ถ้าอยากทำ mobile drawer ต่อ หรือสงสัยว่าควรแยก NavLinks ออกเป็น client component ตัวเล็กไหม ก็ถามได้ · หรือถ้าเจอ error ตอน build ก็เอาข้อความทั้งก้อนมา โดยเฉพาะบรรทัด Import trace

อ้างอิง

• Next.js — Link Component — อ่านหัวข้อ Checking active links ซึ่งเป็นตัวอย่าง usePathname แบบเดียวกับที่บทนี้ใช้แก้ link.active · แล้วอ่าน Scroll offset with sticky headers ต่อ ถ้าคุณใช้ Navbar แบบ fixed แล้วกดลิงก์ไป #id แล้วหัวข้อโดนบัง
• Next.js — usePathname — อ่านสองย่อหน้าแรกให้จบ — ประโยคแรกบอกตรง ๆ ว่าเป็น Client Component hook และย่อหน้าถัดมาอธิบายว่า component ที่ใช้มันยังถูกเรนเดอร์เป็น HTML ตอนโหลดหน้าแรกอยู่ดี (ตรงกับที่ curl ในบทนี้ยังเห็น aria-current ใน HTML)
• Tailwind CSS — Responsive design — อ่านหัวข้อ Working mobile-first และตาราง breakpoint ในหัวข้อ Overview (จะเห็น lg = 64rem ตรงกับ CSS ที่บทนี้ก็อปมา)
• MDN — position — อ่านคำอธิบายค่า fixed กับ sticky ประโยคที่บอกว่า fixed "removed from the normal document flow" คือต้นเหตุของกับดักที่ 1
• MDN — aria-current — อ่านคำอธิบายค่า page ที่ใช้กับลิงก์ในเมนูนำทาง · หลักคือเมื่อลิงก์ของหน้าปัจจุบันหน้าตาต่างจากลิงก์อื่น (เช่นเป็นสีหลัก) ต้องมี aria-current บอกด้วย คนที่มองไม่เห็นสีจะได้รู้เหมือนกัน
• Ramotion — Web Design Layout (ลิงก์ในสไลด์หน้า 35) — อ่านหัวข้อ Core Elements of Web Design Layout ซึ่งไล่องค์ประกอบไว้หกอย่าง (Top header · Navigation · Header · Content area · Sidebar · Footer) — กล่องสี่กล่องในสไลด์ยุบมาจากรายการนี้ · แล้วข้ามไป Responsiveness กับ Mobile-Friendliness ซึ่งเป็นเรื่องที่เมนู hidden lg:flex ยังทำไม่ครบ