動態路由段

當您事先不知道確切的路由段名稱，並希望從動態資料建立路由時，可以使用動態路由段，這些路由段可以在請求時填充或在構建時預渲染。

約定

動態路由段可以透過將資料夾名稱用方括號包裹來建立：[folderName]。例如，一個部落格可以包含以下路由 app/blog/[slug]/page.js，其中 [slug] 是部落格文章的動態路由段。

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <div>My Post: {slug}</div>
}

動態路由段作為 params 屬性傳遞給 layout、page、route 和 generateMetadata 函式。

在客戶端元件中

在客戶端元件的 page 中，可以使用 use 鉤子訪問來自 props 的動態路由段。

'use client'
import { use } from 'react'
 
export default function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = use(params)
 
  return (
    <div>
      <p>{slug}</p>
    </div>
  )
}

或者，客戶端元件可以使用 useParams 鉤子在客戶端元件樹中的任何位置訪問 params。

捕獲所有路由段

動態路由段可以透過在方括號內新增省略號 [...folderName] 來擴充套件，以 捕獲所有 後續路由段。

例如，app/shop/[...slug]/page.js 將匹配 /shop/clothes，以及 /shop/clothes/tops、/shop/clothes/tops/t-shirts 等。

可選的捕獲所有路由段

捕獲所有路由段可以透過在雙層方括號 [[...folderName]] 中包含引數來使其 可選。

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

捕獲所有 和 可選捕獲所有 路由段之間的區別在於，可選的路由段也匹配不帶引數的路由（在上述示例中為 /shop）。

TypeScript

使用 TypeScript 時，您可以根據您配置的路由段新增 params 的型別 — 分別使用 PageProps<'/route'>、LayoutProps<'/route'> 或 RouteContext<'/route'> 來為 page、layout 和 route 中的 params 定義型別。

路由 params 的值被型別化為 string、string[] 或 undefined（對於可選的捕獲所有路由段），因為它們的值在執行時之前是未知的。使用者可以在位址列中輸入任何 URL，這些寬泛的型別有助於確保您的應用程式程式碼處理所有這些可能的情況。

如果您正在處理一個 params 只能有固定數量有效值的路由，例如具有已知語言程式碼集的 [locale] 引數，您可以使用執行時驗證來處理使用者可能輸入的任何無效引數，並讓您的應用程式的其餘部分使用您已知集中的更窄的型別。

import { notFound } from 'next/navigation'
import type { Locale } from '@i18n/types'
import { isValidLocale } from '@i18n/utils'
 
function assertValidLocale(value: string): asserts value is Locale {
  if (!isValidLocale(value)) notFound()
}
 
export default async function Page(props: PageProps<'/[locale]'>) {
  const { locale } = await props.params // locale is typed as string
  assertValidLocale(locale)
  // locale is now typed as Locale
}

行為

• 由於 params 屬性是一個 Promise。您必須使用 async/await 或 React 的 use 函式來訪問這些值。
  • 在 14 版及更早版本中，params 是一個同步屬性。為了幫助實現向後相容性，您仍然可以在 Next.js 15 中同步訪問它，但此行為將來會被棄用。

示例

使用 generateStaticParams

generateStaticParams 函式可用於在構建時（而不是按需請求時）靜態生成 路由。

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}

在 generateStaticParams 函式內部使用 fetch 時，請求會 自動去重。這可以避免佈局、頁面和其他 generateStaticParams 函式對相同資料進行多次網路呼叫，從而加快構建時間。