NextJS

NextJS - Điều hướng giữa các trang

Written by huudoanh

Bây giờ chúng ta biết cách tạo một ứng dụng Next.js đơn giản và chạy nó. Ứng dụng đơn giản của chúng ta chỉ có một trang duy nhất, nhưng chúng ta có thể thêm bao nhiêu trang tùy thích. Ví dụ: Bạn có thể tạo trang “About” bằng cách thêm nội dung sau vào Page/about.js:

export default function About() {
  return (
    <div>
      <p>This is the about page</p>
    </div>
  );
}

Sau đó bạn truy cập vào link http://localhost:3000/about.

Chúng ta cần kết nối các trang này. Bạn có thể sử dụng thẻ <a /> cho điều đó. Tuy nhiên, nó sẽ không thực hiện điều hướng phía khách hàng; thay vào đó, trình duyệt sẽ thực hiện một yêu cầu đến máy chủ cho trang tiếp theo và làm mới trang, đó không phải là điều chúng ta muốn.

Để hỗ trợ điều hướng phía máy client, chúng ta cần sử dụng Link API của Next.js, được export qua next/link. <Link /> sẽ tìm nạp trước trang và điều hướng sẽ diễn ra mà không cần làm mới trang.

Hãy xem cách sử dụng next/link như thế nào.

Cài đặt

Để làm theo bài học này, bạn cần có một ứng dụng Next.js đơn giản. Tải xuống ứng dụng ví dụ sau:

git clone https://github.com/zeit/next-learn-demo.git
cd next-learn-demo
cd 1-navigate-between-pages

Sau đó chạy lệnh:

npm install
npm run dev

Sau đó bạn truy cập vào link http://localhost:3000/.

Bây giờ chúng ta sẽ sử dụng next/link để liên kết hai trang của chúng ta.

Thêm code bên dưới vào file pages/index.js

// This is the Link API
import Link from 'next/link';

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

Ở đây chúng ta đã import next/link dưới dạng Link và sử dụng nó:

<Link href="/about">
  <a>About Page</a>
</Link>

Truy cập lại http://localhost:3000/

Sau đó nhấp vào liên kết “About Page”. Nó sẽ điều hướng bạn đến trang “About”.

Ở đây chúng ta đã tìm hiểu cách sử dụng rất cơ bản của next/link. Có một số cách thú vị khác để sử dụng nó và chúng ta sẽ tìm hiểu về chúng trong các bài học sắp tới.