動態路由

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