Boss Battle: Mini Project — Blog Viewer

เป้าหมายของ Mission นี้: รวมทุกอย่างที่เรียนมาทั้งคอร์สเป็น Mini Project เดียว — Blog Viewer ที่ใช้งานได้จริง

flowchart TD
    L["Layout: Navbar ทุกหน้า"] --> P["/posts: รายการโพสต์"]
    P -->|"คลิกโพสต์"| D["/posts/[id]: รายละเอียด"]
    D -->|"ปุ่มย้อนกลับ"| P
    P --> S["Loading / Error / Empty State"]
    D --> S

สิ่งที่ต้องมีครบ

• ✅ Layout — มี Navbar อยู่ทุกหน้า (จาก Chapter 1)
• ✅ หน้ารวมโพสต์ (/posts) — ดึงข้อมูลจริงมาแสดงเป็นรายการ (จาก Chapter 4)
• ✅ หน้ารายละเอียด (/posts/[id]) — คลิกจากหน้ารวมแล้วมาดูโพสต์เดียว (จาก Chapter 5)
• ✅ Loading / Error / Empty State — ครบทั้งสองหน้า (จาก Chapter 4)
• ✅ ปุ่มย้อนกลับ — จากหน้า Detail กลับไปหน้ารวมโพสต์ได้

แหล่งข้อมูล

ใช้ https://jsonplaceholder.typicode.com/posts เหมือนที่ฝึกมาใน Chapter 4-5 ได้เลย — หรือ ถ้าอยากลองอย่างอื่น ก็มี https://jsonplaceholder.typicode.com/users (รายชื่อผู้ใช้) ให้ลองทำ เป็น "Product List" แบบ mock ก็ได้เหมือนกัน โครงสร้างเหมือนกันหมด

แนวทางเริ่มต้น

1. เริ่มจากไฟล์ที่มีอยู่แล้วจาก Mission ก่อนหน้า (app/posts/page.tsx, app/posts/[id]/page.tsx) — เอามาต่อยอด ไม่ต้องเริ่มใหม่จากศูนย์
2. เช็ค Navbar ใน app/layout.tsx ว่ามีลิงก์ไปหน้า /posts ด้วยหรือยัง
3. เพิ่มปุ่ม "← กลับไปหน้ารวม" ในหน้า Detail (ใช้ <Link href="/posts">)
4. ทดสอบ: ปิดเน็ตแล้วลองโหลดดู (ควรเห็นข้อความ error ไม่ใช่หน้าขาวเปล่า)

โครงหน้า Detail (ทวนจาก Chapter 5)

หน้า Detail ต้องมีทั้ง Loading/Error State (ต้องใช้ "use client") และอ่าน id จาก URL — สองอย่างนี้มาเจอกันตรง use(params) อย่าเผลอเขียน params.id ตรงๆ

// app/posts/[id]/page.tsx
"use client";
import { use, useState, useEffect } from "react";
import Link from "next/link";

type Post = { id: number; title: string; body: string };

export default function PostDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = use(params); // Client Component แกะ params ด้วย use() แทน await
  const [post, setPost] = useState<Post | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    async function loadPost() {
      setLoading(true);
      setError("");
      try {
        const response = await fetch(
          `https://jsonplaceholder.typicode.com/posts/${id}`,
        );
        if (!response.ok) throw new Error("ไม่พบโพสต์นี้");
        setPost(await response.json());
      } catch (err) {
        setError("โหลดข้อมูลไม่สำเร็จ");
      } finally {
        setLoading(false);
      }
    }
    loadPost();
  }, [id]);

  if (loading) return <p className="p-8">กำลังโหลด...</p>;
  if (error) return <p className="p-8 text-red-600">{error}</p>;
  if (!post) return <p className="p-8">ไม่พบโพสต์</p>;

  return (
    <article className="p-8">
      <Link href="/posts" className="text-blue-600">
        ← กลับไปหน้ารวม
      </Link>
      <h1 className="mt-4 text-2xl font-bold">{post.title}</h1>
      <p className="mt-4 text-neutral-600">{post.body}</p>
    </article>
  );
}

จุดที่พังบ่อย

ไม่ต้องเริ่มใหม่จากศูนย์เด็ดขาด เพราะจะทำไม่ทัน — ต่อยอดจากของเดิมที่ทำมาทั้งวัน แล้วเติมส่วนที่ ยังขาดให้ครบ