5 4. การ Routing และหน้า Home

5.0.1 โครงสร้าง App Router

src/app/
├── layout.tsx          # Root layout — header + main + footer
├── page.tsx            # หน้า Home
├── not-found.tsx       # 404
├── loading.tsx         # Loading state
├── globals.css         # Global styles
├── robots.ts           # robots.txt
├── sitemap.ts          # sitemap.xml
├── icon.tsx            # Favicon
├── apple-icon.tsx      # Apple touch icon
├── opengraph-image.tsx # OG Image
├── tools/              # /tools
│   ├── page.tsx        # listing
│   ├── [slug]/page.tsx # detail
│   └── compare/page.tsx# comparison
├── guides/             # /guides
│   ├── page.tsx
│   └── [slug]/page.tsx
├── news/               # /news
│   ├── page.tsx
│   └── [slug]/page.tsx
├── deals/page.tsx      # /deals
├── services/           # /services
│   ├── page.tsx
│   └── ai-stack-audit-express/page.tsx
├── auth/               # /auth
│   ├── login/page.tsx
│   ├── register/page.tsx
│   ├── forgot-password/page.tsx
│   └── reset-password/page.tsx
├── dashboard/          # /dashboard
│   ├── page.tsx
│   └── prompts/...
├── about/page.tsx, contact/page.tsx, privacy/page.tsx
├── advertise/page.tsx, affiliate-disclosure/page.tsx
├── methodology/page.tsx, upgrade/...
└── mimoadminza/        # /mimoadminza (admin CMS)
    ├── layout.tsx
    ├── page.tsx
    ├── tools/, guides/, news/, deals/
    ├── media/, affiliate-links/, audit-logs/, news-intake/

5.0.2 Root Layout — backbone ของทั้งเว็บ

// layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="th">
      <body className="min-h-screen bg-[#050505] antialiased">
        <CompareProvider>
          <SiteHeader />
          <main>{children}</main>
          <SiteFooter />
          <CompareBar />
        </CompareProvider>
      </body>
    </html>
  );
}

✅ lang="th" — บอก search engine ว่าเป็นภาษาไทย ✅ CompareProvider + CompareBar — ระบบเปรียบเทียบเครื่องมือ (global context)

🤔 ทำไมใช้ App Router ไม่ใช่ Pages Router? — App Router (Next.js 13+) มีข้อดี: - Server Components — render บน server, ส่ง HTML ไป client เลย (SEO + performance) - Layout แบบ Nested — header/footer ไม่ต้อง render ซ้ำทุก page - Streaming — โหลดเนื้อหาทีละส่วน ไม่ต้องรอทั้งหมด - Pages Router จะถูก deprecate ในอนาคต

5.0.3 ตัวอย่าง Hero Section ของ Home

<section className="mx-auto max-w-[1500px] px-4 py-8">
  <div className="hero-cinematic mima-frame grid overflow-hidden rounded-[4px] lg:grid-cols-[minmax(0,1fr)_440px]">
    {/* Content column */}
    <div className="p-5 sm:p-10">
      {/* Pill tags */}
      <div className="flex flex-wrap gap-2">
        <Pill>Thai-first AI discovery</Pill>
        <Pill>รีวิวสั้น อ่านง่าย</Pill>
      </div>
      {/* H1 — ใช้ text-8xl บน XL screen */}
      <h1 className="text-4xl sm:text-6xl lg:text-7xl xl:text-8xl font-semibold leading-[0.95]">
        เลือก AI tools
        <span className="block text-zinc-300">ให้ตรงงานจริง</span>
      </h1>
      {/* Metric counters */}
      <div className="grid grid-cols-3 border border-white/[0.08]">
        <div className="bg-[#0B0B0B]/80 p-4">
          <p className="text-3xl font-semibold text-white">{tools.length}+</p>
          <p className="mima-label text-zinc-600">AI TOOLS</p>
        </div>
      </div>
    </div>
    {/* Sidebar — CommandPanel + featured deal */}
    <aside className="p-5">
      <CommandPanel />
    </aside>
  </div>
</section>