動態路由

如果您事先不知道確切的區段名稱，並且想要根據動態資料建立路由，您可以使用在請求時填入的動態區段，或在建置時預先渲染。

慣例

您可以透過將檔案或資料夾名稱用方括號括起來來建立動態區段：[區段名稱]。例如，[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>
}

全域符合區段

藉由在括號內加上省略號 [...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）。