NextJS, một framework React phổ biến, mang đến cho các nhà phát triển web một bộ công cụ mạnh mẽ để xây dựng các ứng dụng web hiện đại, hiệu suất cao và thân thiện với SEO.

Trong bài viết này, chúng ta sẽ đi sâu vào ba khái niệm cơ bản trong NextJS: Pages, Routing và Components, để hiểu rõ hơn cách chúng hoạt động và cách tận dụng chúng để xây dựng các ứng dụng web tuyệt vời.

1. Pages: Xây dựng giao diện người dùng trực quan

Trong NextJS, mỗi trang (page) của ứng dụng web được biểu diễn bằng một component React. Các component này được đặt trong thư mục pages và tự động trở thành các route của ứng dụng. Ví dụ, một component pages/about.js sẽ tự động tạo ra một route /about trong ứng dụng.

Các loại Pages trong NextJS:

Pages tĩnh (Static Pages): Các trang được tạo sẵn HTML tại thời điểm build, giúp tăng tốc độ tải trang và tối ưu hóa SEO.
Pages động (Dynamic Pages): Các trang được tạo HTML trên server (SSR) hoặc trên client (CSR) tùy theo yêu cầu của người dùng.
Pages kết hợp (Hybrid Pages): Các trang kết hợp giữa SSG và SSR để tận dụng ưu điểm của cả hai.

Cách tạo một Page đơn giản:

JavaScript

// pages/about.js
function About() {
  return (
    <div><h1>About Us</h1><p>Welcome to our website!</p></div>
  );
}

export default About;

2. Routing: Điều hướng người dùng mượt mà

NextJS cung cấp một hệ thống routing mạnh mẽ và linh hoạt, cho phép bạn định nghĩa các đường dẫn (URL) và ánh xạ chúng tới các component trang tương ứng.

Các tính năng routing nổi bật:

File-system based routing: Tự động tạo các route dựa trên cấu trúc thư mục pages.
Dynamic routing: Tạo các route động bằng cách sử dụng dấu ngoặc vuông (ví dụ: pages/posts/[id].js).
Nested routing: Tạo các route lồng nhau để tổ chức ứng dụng tốt hơn.
Link component: Tạo các liên kết (link) giữa các trang một cách dễ dàng.
Programmatic navigation: Điều hướng người dùng bằng JavaScript.

Ví dụ về dynamic routing:

JavaScript

// pages/posts/[id].js
function Post({ post }) {
  return (
    <div><h1>{post.title}</h1><p>{post.content}</p></div>
  );
}

export async function getStaticPaths() {
  // ... Lấy danh sách các ID bài viết từ API hoặc cơ sở dữ liệu
}

export async function getStaticProps({ params }) {
  // ... Lấy dữ liệu bài viết dựa trên ID từ API hoặc cơ sở dữ liệu
}

export default Post;

3. Components: Xây dựng các khối giao diện tái sử dụng

Components là các khối xây dựng cơ bản của ứng dụng React và NextJS. Chúng cho phép bạn chia nhỏ giao diện người dùng thành các phần nhỏ hơn, độc lập và tái sử dụng được.

Các loại Components trong NextJS:

Layout components: Xác định cấu trúc chung của ứng dụng, bao gồm header, footer, sidebar, v.v.
Page components: Biểu diễn nội dung của từng trang trong ứng dụng.
UI components: Các component nhỏ hơn, tập trung vào việc hiển thị giao diện người dùng, chẳng hạn như nút, biểu mẫu, bảng, v.v.

Ví dụ về một UI component:

JavaScript

// components/Button.js
function Button({ children, onClick }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

Lời kết

Pages, Routing và Components là ba khái niệm cơ bản và quan trọng trong NextJS. Nắm vững những khái niệm này sẽ giúp bạn xây dựng các ứng dụng web mạnh mẽ, linh hoạt và chuyên nghiệp với NextJS.

Các khái niệm cơ bản trong NextJS: Pages, Routing, Components