Next.js มี client-side navigation ซึ่งเร็วกว่าการโหลดหน้าเต็มรูปแบบ — จะเรียกข้อมูล/คอมโพเนนต์ของหน้าใหม่เท่านั้น และสลับกันโดยให้เลย์เอาต์ที่ใช้ร่วมกันติดอยู่
Link component (declarative)
tsx
;
() {
(
);
}
<Link> แสดง <a> แต่จะสกัดกั้นการคลิกสำหรับ client-side navigation สิ่งสำคัญคือ prefetch เส้นทางที่เชื่อมโยงเมื่อลิงค์เข้าสู่ viewport ดังนั้นการนำทางจึงรู้สึกทันที
"use client"; // useRouter needs a Client Component
import { useRouter } from "next/navigation"; // note: next/navigation in App Router
export default function LoginForm() {
const router = useRouter();
async function onSubmit() {
await login();
router.push("/dashboard"); // navigate after an action
// router.replace("/x") — no history entry
// router.back() — go back
// router.refresh() — re-fetch server data for the current route
}
}
ใช้ useRouter เมื่อการนำทางต้องเกิดขึ้นเพื่อตอบสนองต่อลอจิก (หลังจากการส่งแบบฟอร์ม การเข้าสู่ระบบ เป็นต้น) ไม่ใช่การคลิกที่ลิงค์
<Link> โหลดเส้นทางล่วงหน้าก่อนที่คุณจะคลิกใน App Router hooks มาจาก next/navigation (useRouter, usePathname, useSearchParams) — ไม่ใช่ next/router เก่า (ซึ่งเป็นเฉพาะ Pages Router เท่านั้น) การผสมพวกมันคือข้อผิดพลาดทั่วไป
<Link> (ด้วย automatic prefetching) และ useRouter เป็นวิธีที่คุณสร้าง fast, SPA-like navigation ที่ Next.js มีชื่อเสียง
การใช้พวกมันแทน plain <a href> (ซึ่งบังคับให้โหลดแบบเต็ม) คือสิ่งที่ทำให้แอปตอบสนองได้อย่างรวดเร็วและรักษาสถานะของเลย์เอาต์