← กลับไปหน้าบทเรียนบทที่ 04
4. การ Routing และหน้า Home
โครงสร้าง 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/Root Layout — backbone ของทั้งเว็บ
tsx
// 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 ในอนาคต
ตัวอย่าง Hero Section ของ Home
tsx
<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>📥 ดาวน์โหลดฉบับเต็ม