close

Cơ bản về Next.js: Tạo Trang và Giải thích Routing Cơ bản

Trong quá trình phát triển ứng dụng web, việc quản lý các trang và điều hướng giữa chúng là một phần quan trọng. Trong loạt bài viết này, chúng ta sẽ tìm hiểu về cơ bản về việc tạo trang và thực hiện điều hướng trong Next.js. Đây là những khái niệm cơ bản nhưng quan trọng giúp bạn xây dựng ứng dụng web linh hoạt và dễ quản lý.

Tạo và Hiển thị Trang Đầu Tiên

Trước tiên, chúng ta sẽ tìm hiểu cách tạo và hiển thị một trang đơn giản trong Next.js. Bạn có thể tạo các trang bằng cách tạo các tệp trong thư mục pages trong dự án của bạn. Ví dụ, để tạo trang chào mừng, bạn có thể tạo tệp welcome.js trong thư mục pages.

// pages/welcome.js
function WelcomePage() {
  return <h1>Welcome to Next.js!</h1>;
}

export default WelcomePage;

Trong đoạn mã trên, chúng ta đã tạo một trang chào mừng đơn giản. Khi bạn truy cập đường dẫn /welcome trên trình duyệt, bạn sẽ thấy thông điệp Welcome to Next.js!.

Routing Cơ Bản

Next.js có hệ thống routing mạnh mẽ và tự nhiên, giúp bạn quản lý việc điều hướng giữa các trang một cách dễ dàng. Routing trong Next.js dựa vào thư mục pages, với mỗi tệp trong thư mục này tương ứng với một đường dẫn. Ví dụ, tệp about.js trong thư mục pages sẽ tạo ra trang với đường dẫn /about.

Tạo Liên Kết và Điều Hướng

Để tạo liên kết giữa các trang và thực hiện điều hướng, chúng ta có thể sử dụng thành phần <Link> từ thư viện next/link. Dưới đây là một ví dụ về cách tạo liên kết từ trang chào mừng đến trang về chúng tôi.

// pages/welcome.js
import Link from 'next/link';

function WelcomePage() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <Link href="/about">Learn more about us</Link>
    </div>
  );
}

export default WelcomePage;

Trong ví dụ trên, khi bạn nhấp vào liên kết Learn more about us, bạn sẽ được chuyển hướng đến trang /about.

Kết Luận

Trong phần này, chúng ta đã tìm hiểu về cách tạo và hiển thị các trang đơn giản trong Next.js, cũng như cách thực hiện điều hướng giữa các trang bằng cách sử dụng thư mục pages và thành phần <Link>. Đây là những bước đầu tiên quan trọng trong việc xây dựng ứng dụng Next.js. Trong các bài viết tiếp theo, chúng ta sẽ tiếp tục khám phá những khía cạnh khác của Next.js để xây dựng ứng dụng web động và tương tác hơn.