Next.js－Link

又來帶你環遊世界。

簡述

在 Next 中要做「跳轉」這個動作一樣要透過它提供的 Link 元件來實作，像這樣：

import Link from 'next/link'

export default function Navbar() {
  return (
    <div>
      <Link href='/'>
        <a>Home</a>
      </Link>
      <Link href='/about'>
        <a>About</a>
      </Link>
      <Link href='/list'>
        <a>List</a>
      </Link>
    </div>
  )
}

附註： Next.js 12.2 以前才需要把 <a> 包在 <Link> 中

雖然一樣有用到 <a>，可是注意 href 是寫在 <Link> 身上。

<Link> 的用意是 Next 會在背後幫你用很像「SPA」的方式來換頁，不過一樣會做 SSR。

這邊來看一張圖：

這邊可以注意到幾件事：

1. 沒有重新整理（這一點很像 SPA，技術上稱為 「client-side navigation」）
2. 原始碼可以看到更新後的內容（證明這是 SSR）
3. about.js 是在我們到「那個頁面」時才去發 request 取得的（技術上會稱為 Code splitting）

所以這就是用 <Link> 的好處，還有他背後幫你做的事情，這些是單純用 <a> 做不到的，所以我們才需要他。