Next.js cung cấp điều hướng phía client nhanh hơn việc reload toàn trang — nó chỉ fetch dữ liệu/component của trang mới và thay vào, giữ nguyên các layout chung đang mounted.
Component Link (declarative)
tsx
;
() {
(
);
}
<Link> render ra một <a> nhưng chặn cú click để điều hướng phía client. Quan trọng là nó prefetch route được liên kết khi link lọt vào viewport, nên việc điều hướng cảm giác tức thì.
"use client"; // useRouter cần một Client Component
import { useRouter } from "next/navigation"; // lưu ý: next/navigation trong App Router
export default function LoginForm() {
const router = useRouter();
async function onSubmit() {
await login();
router.push("/dashboard"); // điều hướng sau một hành động
// router.replace("/x") — không tạo entry trong history
// router.back() — quay lại
// router.refresh() — fetch lại dữ liệu server cho route hiện tại
}
}
Dùng useRouter khi việc điều hướng phải xảy ra để phản hồi một logic nào đó (sau khi submit form, đăng nhập, v.v.), chứ không phải một cú click vào link.
<Link> tải trước các route trước khi bạn click.Trong App Router, các hook đến từ next/navigation (useRouter, usePathname, useSearchParams) — không phải next/router cũ (vốn chỉ dành cho Pages Router). Nhầm lẫn hai cái là một lỗi phổ biến.
<Link> (với prefetching tự động) và useRouter là cách bạn xây dựng kiểu điều hướng nhanh, giống SPA mà Next.js nổi tiếng.
Dùng chúng thay vì <a href> thuần (vốn ép reload toàn trang) là điều giữ cho app mượt mà và bảo toàn state của layout.