【Next.js】路由機制(動態)

在 Next.js 中，**Dynamic Routes（動態路由）**允許你根據 URL 中的參數來動態建立頁面，這對於像是部落格文章、使用者頁面、商品詳細頁等非常有用。

🗂️ 基本概念

在 Next.js 中，每個檔案都對應一個路由。當你在 app/ 或 pages/ 目錄中使用 方括號（[param]） 定義檔案名稱時，就代表建立了一個動態路由。

例如：

pages/

 └── blog/

 └── [slug].tsx

這樣的結構可以對應：

/blog/hello-world

/blog/my-second-post

在 app/ 目錄中則會是：

app/

 └── blog/

 └── [slug]/

 └── page.tsx

💡 Dynamic Routes 實作（app/）

1️⃣ 建立檔案：app/post/[id]/page.tsx

interface PageProps {

 params: { id: string }

}

export default function Post({ params }: PageProps) {

 return <h1>Post ID: {params.id}</h1>

}

// { params }: PageProps

// { params } => 解構，取出物件的 params 屬性

// :PageProps typescript宣告型別

// 直接簡化成 { params }: { params: { id: string } }

🔁 多層動態路由

支援巢狀結構，例如：

app/

 └── user/

 └── [userId]/

 └── post/

 └── [postId]/

 └── page.tsx

訪問路徑 /user/1/post/10 對應的 params 為：

params: {

 userId: '1',

 postId: '10'

}

✅ Catch-all 路由（捕捉所有）

你可以使用 [...slug] 來捕捉多層級路徑：

app/products/[...slug].tsx 會匹配 /products/a、/products/a/b/c

interface PageProps {

 params: {

 slug?: string[];

 };

}

export default function ProductPage({ params }: PageProps) {

 return (

 <div>

 <h1>Products Page</h1>

 <pre>{JSON.stringify(params.slug)}</pre>

 </div>

 );

}

如果要可選，可用 [[...slug]] 表示非必要。

📌 小結

類型

說明

範例

[param]

基本動態路由

/post/1 → [id].tsx

[...param]

捕捉多層路徑（Catch-all）

/docs/a/b → [...slug].tsx

[[...param]]

可選 catch-all（Optional）

/docs or /docs/a

若你想看實際範例或搭配 getStaticPaths、generateStaticParams 使用，也可以提出，我可以補上。需要嗎？