Linking và Navigating trong Next.js

linking và navigating trong Next.js – cách để di chuyển giữa các trang trong ứng dụng một cách nhanh gọn, mượt mà, không làm người dùng phải “reload” đến phát chán.

Linking và Navigating là gì?

Nói đơn giản, đây là cách Next.js giúp bạn “nhảy” từ trang này sang trang kia mà không cần tải lại toàn bộ trang như kiểu web cổ điển. Next.js dùng cơ chế client-side navigation thông minh, tận dụng <Link> và một vài API xịn sò để trải nghiệm mượt mà hơn.

Cách làm trong Next.js

Next.js hỗ trợ điều hướng cực dễ qua hai công cụ chính: <Link> component và useRouter hook (hoặc router nếu bạn dùng Pages Router).

1. Dùng <Link> để điều hướng
   • Khi nào dùng? Khi bạn muốn tạo liên kết giữa các trang, như menu, nút bấm.Cách làm? Import <Link> từ next/link và bọc thẻ <a> (hoặc không cần <a> cũng được trong App Router).
   Ví dụ : Trong dự án e-commerce, mình có một navbar với liên kết đến trang “Sản phẩm” và “Giỏ hàng”.

import Link from 'next/link';
export default function Navbar() {
  return (
    < nav >
      < Link href="/" >Trang Chủ</ Link >
      Sản Phẩm
      < Link href="/cart" >Giỏ Hàng</ Link >
    </ nav >
  );
}

Kết quả: Click vào link nào, Next.js tự động tải nội dung trang đó mà không reload toàn bộ. Nhanh như chớp, người dùng thích mê!

Dùng useRouter để điều hướng bằng code

• Khi nào dùng? Khi bạn muốn chuyển trang dựa trên sự kiện, như sau khi submit form.
• Cách làm? Import useRouter và gọi hàm push để nhảy trang.

Ví dụ: Trong trang đăng nhập, sau khi người dùng submit form thành công, mình muốn redirect người dùng sang trang dashboard.

Kết quả: Sau khi nhấn “Đăng Nhập”, người dùng được chuyển hướng đến /dashboard mà không cần reload. Mượt như bôi dầu!

'use client'; // Dùng trong App Router để chạy client-side
import { useRouter } from 'next/navigation';

export default function LoginForm() {
  const router = useRouter();

  const handleLogin = async (e) => {
    e.preventDefault();
    // Giả lập login thành công
    const success = true;
    if (success) {
      router.push('/dashboard'); // Chuyển sang dashboard
    }
  };

  return (
    < form onSubmit={handleLogin} >
      < input type="text" placeholder="Username" />
      < input type="password" placeholder="Password" />
      < button type="submit">Đăng Nhập</ button >
    </ form >
  );
}

Tại sao Linking và Navigating trong Next.js xịn?
Nhanh: Tải trước nội dung (prefetch) khi người dùng hover qua link (mặc định trong ).
Mượt: Chuyển trang không giật, nhờ client-side rendering.
Dễ dùng: Code ít, hiệu quả cao.
Lưu ý:
Nếu dùng App Router (Next.js 13+), nhớ thêm ‘use client’ cho các component dùng useRouter.
Đừng quên kiểm tra đường dẫn (href) cho đúng, kẻo nhảy nhầm sang “404”.
Kết luận
Linking và navigating trong Next.js đơn giản nhưng mạnh mẽ. Dùng cho liên kết tĩnh, useRouter cho điều hướng động – thế là bạn đã có một ứng dụng mượt mà, người dùng không kịp chê chậm.