今天來介紹為什麼在 Next.js 中，
我們切換頁面的方式不是用，<a></a> 標籤，而是用 Next.js 的 Link component 的方式來切換頁面

Link

在 Next.js 的專案中，提供了 Link，讓我們去執行換頁的動作，
那他跟一般的 <a> 標籤差別在哪呢 ?
我們先看看兩張圖，一個是使用 a標籤 而另一個是使用 Link 去執行換頁的動作

// index.jsx
import Link from "next/link"

export default function Home() {
  return (
    <>
      <h1>首頁</h1>

      <Link href="/users">
        <a>使用 Link 前往使用者列表</a>
      </Link>

      <a href="/users">使用 a連結 前往使用者列表</a>
    </>
  )
}

我們可以看到這兩個所回應的時間有所不同，使用 Link 會比較快，
為什麼呢？

這是因為在 Next.js 中切換頁面是用 client-side navigation 的方式去執行換頁，給人的感覺會很像是你在執行一個 SPA (Single Page Application)，而不是像傳統的 server side rendering 在每次切換頁面時畫面都會有重新載入的感覺。

而 官方文件 也有提到下面這段話

Client-side navigation means that the page transition happens using JavaScript, which is faster than the default navigation done by the browser.

沒錯他是使用 JavaScript 去執行頁面的轉換

這是使用 Link所發出的請求，他會去要一個 js 檔

而這是一般的 a 連結發出的請求

Link 中 href 可以放什麼？

那我們在 Link component 中， href 可以接受什麼參數呢？

href 可以接受一般的字串

<Link href="/users">
    <a>使用 Link 前往使用者列表 users/</a>
</Link>

<Link href="/users/1">
    <a>使用 Link 前往 users/[id].jsx</a>
</Link>

<Link href="/posts/2022/10/10">
    <a>使用 Link 前往 posts/[...date].jsx</a>
</Link>

也可以接受一個 物件

// 這兩者連結到的頁面都是一樣的
<Link href="/users/1">
    <a>使用 Link 前往 users/[id].jsx</a>
</Link>

<Link href={{ pathname: "users/[id]", query: { id: "1"} }}>
    <a>使用 Link 前往 users/[id].jsx </a>
</Link>

// 同理這兩者也是會連結到相同的頁面
<Link href="/posts/2022/10/10">
    <a>使用 Link 前往 posts/[...date].jsx</a>
</Link>

<Link href={{ pathname: "posts/[...date]", query: { date: [2022, 10, 10]} }}>
    <a>使用 Link 前往 posts/[...date].jsx</a>
</Link>

再來就是我們假設，已經設計好了 API 是有提供搜尋功能，而我希望可以找到 3 號使用者，我們所希望的網址可能是這樣 /users?id=3
那你則可以這樣寫

// 這樣他就會幫你生成 '/users?id=3'
<Link href={{ pathname: "users/", query: { id: "3"} }}>
    <a>使用 Link 前往 搜尋 3 號使用者 </a>
</Link>

都用 Link 了裡面一定要放 a 標籤嗎？

我們可以嘗試一下在 Link 中放入 div 試試看

import Link from "next/link"

export default function Home() {
  return (
    <>
      <h1>首頁</h1>

      <Link href="/users">
        <a> a標籤 使用 Link 前往使用者列表 users/</a>
      </Link>

      <Link href="/users">
        <div> div標籤 使用 Link 前往使用者列表 users/</div>
      </Link>
    </>
  )
}

然後你就會發現，還是一樣有效果啊，並不會因為是 div 而不能切換頁面，但是我們可以打開網頁中的開發者工具看看

若只看這樣，你會知道這個 div 其實是可以前往 users/ 的頁面嗎？
瀏覽器也是一樣的，他會不知道你的 div 其實是個連結
所以在 Link 中放入 a 標籤其實是為了 SEO

Link 的注意事項

就是Link 這個 component 只能接受裡面有一個元素，不管是多給少給都會出錯
從剛剛的上面在 Link 中放入 div 就可以知道
Link 中的元素，最後在網頁上生成的結果，也只是呈現原本元素的樣子，只是你可以點擊他，並會去請求一個 js 檔案，實現換頁

但是如果你在 Link 中放入兩個以上或是沒放任何元素的話，他就沒辦法生成元素顯示在畫面上，所以才會出錯

小結

今天介紹了，Next.js 中專屬的 Link Component，他的慣例和用法，謝謝大家收看