動態路由

當您無法預先知道確切的區段名稱，並希望根據動態資料建立路由時，可以使用動態區段 (Dynamic Segments)，這些區段會在請求時填充或在建置時預先渲染。

慣例

動態區段可以通過將檔案或資料夾名稱用方括號包裹來建立：[segmentName]。例如 [id] 或 [slug]。

動態區段可以從 useRouter 存取。

範例

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

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()
  return <p>文章：{router.query.slug}</p>
}

全捕捉區段

動態區段可以擴展為全捕捉後續區段，方法是在括號內添加省略號 [...segmentName]。

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

可選全捕捉區段

全捕捉區段可以通過將參數放在雙層方括號中來設為可選：[[...segmentName]]。

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

全捕捉與可選全捕捉區段的區別在於，可選版本也會匹配不帶參數的路由（如上例中的 /shop）。