Routing cơ bản với Pages Router

Trong bài học này, học viên sẽ tìm hiểu cách hoạt động của hệ thống định tuyến (routing) trong Next.js khi sử dụng Pages Router. Đây là một trong những tính năng mạnh mẽ và tiện lợi nhất của Next.js – định tuyến được xây dựng dựa trên cấu trúc thư mục mà không cần cấu hình thủ công. Bài học sẽ hướng dẫn tạo trang mới, liên kết giữa các trang, làm việc với route động và nested routing (route lồng nhau).

Routing cơ bản với Pages Router

1. Cách tạo trang mới trong pages/

• Trong Next.js, mỗi file .js, .ts, .jsx, hoặc .tsx bên trong thư mục pages/ tương ứng với một route (URL) trên trình duyệt.

Ví dụ:

pages/
├── index.js         → route: "/"
├── about.js         → route: "/about"
├── contact.js       → route: "/contact"

• Tạo một trang mới about.js:

// pages/about.js
export default function About() {
  return <h1>Giới thiệu về chúng tôi</h1>
}

• Truy cập trình duyệt: http://localhost:3000/about

2. Liên kết các trang với next/link

• Sử dụng component Link để điều hướng giữa các trang mà không reload toàn bộ trang (SPA behavior).

Ví dụ:

// pages/index.js
import Link from 'next/link'

export default function Home() {
  return (
    <>
      <h1>Trang chủ</h1>
      <Link href="/about">Giới thiệu</Link>
    </>
  )
}

• next/link hỗ trợ prefetch và tối ưu hiệu năng cho điều hướng nội bộ.

3. Route động: [slug].js, [id].js

• Để tạo route động (ví dụ: /blog/abc, /product/123), dùng cú pháp dấu ngoặc vuông trong tên file.

Ví dụ:

pages/
└── blog/
    └── [slug].js      → route: "/blog/:slug"

// pages/blog/[slug].js
import { useRouter } from 'next/router'

export default function BlogPost() {
  const router = useRouter()
  const { slug } = router.query

  return <h1>Bài viết: {slug}</h1>
}

• Tương tự với [id].js, [username].js, v.v.

4. Nested routing và cấu trúc thư mục con

• Có thể tổ chức các route theo thư mục lồng nhau để tạo URL dạng /admin/dashboard, /blog/post/abc

Ví dụ:

pages/
├── admin/
│   └── dashboard.js      → route: "/admin/dashboard"
├── blog/
│   └── post/
│       └── [slug].js     → route: "/blog/post/:slug"

• Mỗi cấp thư mục tương ứng với một phần trong URL.

• Tạo file:

// pages/admin/dashboard.js
export default function Dashboard() {
  return <h1>Trang quản trị</h1>
}

Kết luận

Bài học này giúp học viên hiểu rõ cách tạo và quản lý các route trong Next.js khi sử dụng Pages Router. Học viên đã biết cách:

• Tạo trang mới nhanh chóng dựa trên cấu trúc file
• Điều hướng giữa các trang với next/link
• Tạo route động với [param].js
• Tổ chức cấu trúc thư mục để xây dựng route lồng nhau

Việc làm chủ routing là bước đầu tiên để xây dựng các ứng dụng có nhiều trang, có cấu trúc rõ ràng, dễ mở rộng và dễ bảo trì.