動態路由

當您無法預先知道確切的區段名稱，並希望從動態資料建立路由時，您可以使用在請求時填充的動態區段 (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）。