Navigation giữa các page trong NextJS

Khi liên kết giữa những page, bạn thường sử dụng thẻ <a>. Ở trong Nextjs, bạn sử dụng Link component từ next/link để bọc thẻ <a>. Link cho phép bạn điều hướng giữa những page khác nhau ở phía client-side

Navigate giữa cácpages với next/link

Để sử dụng Component Link của nextjs chúng ta giả sử có 2 page gồm homePage và aboutPage như sau:

pages
|__ index.tsx (HomePage)
|__ about.tsx

Ở trang HomePage chúng ta định nghĩa code như sau: 

import type { NextPage } from 'next'
import Link from 'next/link'
const HomePage : NextPage = () => {
  return (
    <Link href="/about">
      <a>About Us</a>
    </Link>
  )
}
export default HomePage

Và sau cùng bạn tạo 1 page about.tsx trpng folder page nữa với nội dung như sau: 

import type { NextPage } from 'next'
import Link from 'next/link'
const AboutPage : NextPage = () => {
  return (
    <Link href="/">
      <a>Trang chủ</a>
    </Link>
  )
}
export default AboutPage

Cuối cùng bạn chạy yarn dev và chạy lên trình duyệt thì bạn có thể switch qua lại giữa các page với nhau bằng cách tải thêm các file js về và thực thi thêm thôi ( không dùng chức năng full page reload như hồi xửa hồi nay nữa )

Một số thuộc tính thường gặp trong Link

Xem chi tiết ở đây: https://nextjs.org/docs/api-reference/next/link

Navigate với router.push

Đôi khi đời không như là mơ, bạn có thể muốn chuyển trang nhưng dựa trên 1 hành động nào đó ( giống như bạn gọi api được 1 cái id bạn muốn link tới cái trang detail dựa vào id chẳng hạn) => url không cố định => bạn có thể dùng router.push.

import type { NextPage } from 'next'
import { useRouter } from 'next/router'

const ActionPage : NextPage = () => {
  const router = useRouter()

  const handleSubmit = () => {
    router.push('/success-page')
    // or using options object
    router.push({
      pathname: '/products/[productId]',
      query: {
        productId: 24324,
        q: 'ahihi',
      },
    })
  }

  return <button onClick={handleSubmit}>bấm</button>
}
export default ActionPage

Giống với link thì router cũng có nhiều các cái props như sau:

Lưu ý to nhất ngày

Cơ chế Code splitting and prefetching: Next tự động Code splitting, mỗi page chỉ load những thứ cần thiết cho page đó. Nghĩa là khi Home Page đã được render, code của những page khác sẽ không cần load.

Ở trong môi trường Production, bất cứ khi nào Link xuất hiện trong màn hình user có thể nhìn thấy (browser'viewport) . Next sẽ tự động prefetch code cho page đó và lưu vào một nơi gọi là background. Khi click vào Link thì code của page đó sẽ được lấy ra từ background.

Trường hợp bạn không muốn prefetch thì cứ để thêm thuộc tính prefetch={false}

Nếu bạn chưa biết prefetch là gì thì tham khảo thêm ở đây: https://developer.mozilla.org/en-US/docs/Glossary/Prefetch

với cách truy vết để prefetch sử dụng : Intersection Observer API giống như là lazyloading => Điều kiện cần thiết để prefetch có thể thực thi là: 

• Chỉ prefetches links xuất hiện trong khung nhìn - viewport.
• chỉ được kích hoạt trong môi trường production.
• mạng phải mạnh đồng thời không dùng Save-Data