Ngày 2: Routing & Navigation

Dưới đây là hướng dẫn chi tiết cho Ngày 2: Routing & Navigation trong Next.js 🚀

💡

Lộ trình học

💡

Ngày trước đó : Ngày 1

1️⃣ File-based Routing (Routing theo file)

Trong Next.js, hệ thống routing được xây dựng dựa trên cấu trúc thư mục trong pages/.

Ví dụ tạo các trang cơ bản

Thêm các file sau vào thư mục pages/:

📌 Tạo pages/about.js (Trang giới thiệu)

export default function About() {
  return (
    <div>
      <h1>Giới thiệu</h1>
      <p>Đây là trang giới thiệu về chúng tôi.</p>
    </div>
  );
}

📌 Tạo pages/contact.js (Trang liên hệ)

export default function Contact() {
  return (
    <div>
      <h1>Liên hệ</h1>
      <p>Email: [email protected]</p>
    </div>
  );
}

📌 Tạo pages/home.js (Trang home)

export default function Home() {
  return (
    <div>
      <h1>Trang Chủ</h1>
      <p>Chào mừng bạn đến với website của chúng tôi.</p>
    </div>
  );
}

🔹 Kết quả:

/about → Hiển thị trang "Giới thiệu"
/contact → Hiển thị trang "Liên hệ"
/home → Hiển thị trang "Trang chủ"

📌 Điểm quan trọng:

Mỗi file trong thư mục pages/ sẽ tự động trở thành một route.
Không cần khai báo thêm React Router như trong React truyền thống.

2️⃣ Sử dụng Link từ `next/link` để điều hướng

Next.js có sẵn next/link, giúp điều hướng mà không cần tải lại trang.

📌 Sửa pages/index.js để thêm menu điều hướng:

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>🚀 Chào mừng đến với Next.js!</h1>
      <nav>
        <ul>
          <li><Link href="/home">🏠 Trang Chủ</Link></li>
          <li><Link href="/about">ℹ Giới thiệu</Link></li>
          <li><Link href="/contact">📧 Liên hệ</Link></li>
        </ul>
      </nav>
    </div>
  );
}

📌 Thêm CSS để hiển thị menu đẹp hơn
Sửa file styles/globals.css (nếu chưa có, hãy tạo):

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline;
  margin-right: 15px;
}

nav a {
  text-decoration: none;
  color: blue;
  font-weight: bold;
}

nav a:hover {
  color: red;
}

🛠 Kết quả: Khi click vào menu, trang sẽ thay đổi ngay lập tức mà không cần tải lại 🎉

📌 Lưu ý:

next/link giúp điều hướng nhanh hơn vì Next.js prefetch sẵn trang trong nền.
Không cần sử dụng useNavigate() như React Router.

3️⃣ Dynamic Routes (Route động với `[id].js`)

Khi cần tạo trang có URL động (ví dụ: /product/1, /product/2), ta sử dụng Dynamic Routes.

📌 Bước 1: Tạo thư mục pages/product/
Tạo file pages/product/[id].js, trong đó [id] là một biến động.

📌 Bước 2: Lấy giá trị id từ URL

import { useRouter } from 'next/router';

export default function ProductDetail() {
  const router = useRouter();
  const { id } = router.query; // Lấy giá trị id từ URL

  return (
    <div>
      <h1>Chi tiết sản phẩm: {id}</h1>
      <p>Thông tin chi tiết về sản phẩm có ID: {id}</p>
    </div>
  );
}

📌 Bước 3: Tạo danh sách sản phẩm với link động
Thêm file pages/product/index.js:

import Link from 'next/link';

export default function ProductList() {
  const products = [
    { id: 1, name: 'Sản phẩm A' },
    { id: 2, name: 'Sản phẩm B' },
    { id: 3, name: 'Sản phẩm C' }
  ];

  return (
    <div>
      <h1>Danh sách sản phẩm</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <Link href={`/product/${product.id}`}>{product.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

📌 Kết quả:

/product/1 → Hiển thị "Chi tiết sản phẩm: 1"
/product/2 → Hiển thị "Chi tiết sản phẩm: 2"
/product → Hiển thị danh sách sản phẩm

🔹 Lưu ý:

router.query.id sẽ tự động lấy giá trị từ URL.
[id].js cho phép tạo route động, không cần tạo từng file riêng cho mỗi sản phẩm.

🎯 Kết quả Ngày 2

✅ Hiểu cách file-based routing hoạt động trong Next.js.
✅ Sử dụng next/link để điều hướng mà không cần tải lại trang.
✅ Tạo Dynamic Routes với [id].js để xử lý URL động.

Ngày 2: Routing & Navigation