Mission 4: ทบทวน Navigation ด้วย Link

เป้าหมายของ Mission นี้: ทบทวนการเปลี่ยนหน้าด้วย <Link>

Navigation ด้วย <Link>

เปลี่ยนหน้าโดยไม่ต้องโหลดหน้าใหม่ทั้งหน้า (เร็วกว่า <a> ธรรมดามาก)

flowchart LR
    subgraph UseLink["ใช้ Link Component"]
        L1["คลิกลิงก์"] --> L2["สลับหน้าโดยไม่โหลดใหม่ทั้งหน้า"] --> L3["เร็ว"]
    end
    subgraph UseA["ใช้ a ธรรมดา"]
        A1["คลิกลิงก์"] --> A2["โหลดหน้าใหม่ทั้งหมด"] --> A3["ช้ากว่า"]
    end

import Link from "next/link";

<Link href="/about">เกี่ยวกับเรา</Link>;

ใช้ในเมนู Navbar ได้เลย

<nav>
  <Link href="/">Home</Link>
  <Link href="/about">About</Link>
  <Link href="/contact">Contact</Link>
</nav>

ข้อผิดพลาดที่พบบ่อย: ใช้ <a href="/about"> แทน <Link href="/about"> — ใช้งานได้ เหมือนกันแต่ ช้ากว่า เพราะ <a> โหลดหน้าใหม่ทั้งหน้าทุกครั้ง ส่วน <Link> สลับหน้าแบบ ไม่ต้องโหลดใหม่ทั้งหมด