昨天我們介紹了如何在 Next.js 中增加路徑，今天繼續介紹 Next.js 中我們還可以增加怎樣的路徑

三種路徑模式

https://nextjs.org/docs/routing/introduction

關於 Next.js 的路徑設計模式，官方給出了三個分類我們一一來介紹吧

Index routes

The router will automatically route files named index to the root of the directory

這是我們昨天介紹的 Index routes 相較之下比較單純
也就是在 pages 的資料夾下增加新的路徑資料夾並且其中 Index.js 的檔案就是我們的 Index routes

• pages/index.js → /
• pages/blog/index.js → /blog

Nested routes

The router supports nested files. If you create a nested folder structure, files will automatically be routed in the same way still.

再來就是 Nested routes，也就是巢狀路徑，可以在路徑資料夾中在增加一個路徑資料夾像是下圖這樣

會呈現下面的路徑

• pages/posts/setting/profile.jsx → /posts/setting/profile

或是也可以做出其他路徑的檔案

• pages/blog/first-post.js → /blog/first-post

檔名是 js 或是 jsx 都沒關係

Dynamic route segments

最後一個則是 Dynamic route segments，把它可以幫你動態產生許多路徑

為什麼要這樣呢？ 讓我們想想一個情況假如我們的網站有 1000 則文章的話
，他們可能呈現的網址會是這樣

• posts/1 ... posts/1000

我們不可能將 1000 則文章的檔案全部放在我們的專案之中吧？

所以在會出現 Dynamic route segments 來幫助我們

我們以官方網站的例子來說明吧

1. pages/blog/[slug].js → /blog/:slug (/blog/hello-world)

第一個例子我們先依照他得需求做出 [slug].js 這個檔案
並且我們用 Next.js 提供的方法 useRouter() 可以獲得我們的路徑

// pages/blog/[slug].js
import { useRouter } from "next/router"

const Blog = () => {
  const router = useRouter()

  console.log(router);

  return <h1>{router.query.slug}</h1>

}

export default Blog

我們將路徑（router）印出來，會得到一個 物件 其中 query 的值就是我們在網址上打的路徑

所以回到剛剛我們的例子，若是我們的網站有 1000 篇文章，我們就可以這樣去解決它，例如我們可以做個 pages/posts/[id].js，這樣我們就不必真的將 1000 個檔案放在我們的專案中了，我們只要去獲取 API 並且拿到這 1000 筆文章的資料就好了 [id].js 對我們來說就只是個文章的模板而已

2. pages/[username]/settings.js → /:username/settings (/foo/settings)

第二個動態路徑的例子則是將資料夾變成動態路徑的參數
一樣我們在網址輸出這樣

紅色框框是可以變動的

// pages/[username]/settings.js
import { useRouter } from "next/router"

const Page = () => {
  const router = useRouter()
  console.log(router);
  
  return <h1>{router.query.username}</h1>
}

export default Page

Next.js 會將動態路徑，放入 query 中

3. pages/post/[...all].js → /post/* (/post/2022/id/title)

也稱作 Catch all routes
舉個例子，你可能希望你的文章的路徑是依照 年份/月份/日期/第幾篇，去設計的

但是你會你會想要像下面這樣去設計你的路徑嗎？
感覺變得好複雜喔

所以 Next.js 有提供方便的路徑設計去給你使用
也就是 Catch all routes

以我們的例子來說，他會將網址中 post 後面的的參數，變成陣列收集在 query 中

// pages/post/[...date].jsx
import { useRouter } from "next/router";

const Page = (e) => {
   const router = useRouter()
   console.log(router.query);
};

export default Page

小結

今天介紹了 Next.js 路徑的種類，明天會用Dynamic route 去做個打 API 的小範例，在不同的畫面上顯示不同 API 獲得的資料