動態路由

當您不預先知道確切的區段名稱，並想要從動態資料建立路由時，您可以使用動態區段，這些區段會在請求時填入，或在建置時預先渲染。

慣例

動態區段可以透過將檔案或資料夾名稱包在方括號中來建立：[區段名稱]。例如，[id] 或 [slug]。

動態區段可以從 useRouter 存取。

範例

例如，部落格可以包含以下路由 pages/blog/[slug].js，其中 [slug] 是部落格文章的動態區段。

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>Post: {router.query.slug}</p>
}

捕捉所有區段

動態區段可以擴展為捕捉所有後續區段，方法是在括號內加入省略符號 [...區段名稱]。

例如，pages/shop/[...slug].js 將會匹配 /shop/clothes，也會匹配 /shop/clothes/tops、/shop/clothes/tops/t-shirts 等等。

可選的捕捉所有區段

捕捉所有區段可以透過將參數包含在雙方括號中來設為可選：[[...區段名稱]]。

例如，pages/shop/[[...slug]].js 也會匹配 /shop，除了 /shop/clothes、/shop/clothes/tops、/shop/clothes/tops/t-shirts 之外。

捕捉所有和可選的捕捉所有區段之間的差異在於，對於可選的，沒有參數的路由也會被匹配（以上範例中的 /shop）。