Route 路由

網址對應到哪個頁面或 API 的規則。

先用一句話理解

網址對應到哪個頁面或 API 的規則。

打個比方

像商場樓層導覽，告訴你每個門牌通去哪裡。

什麼時候會遇到

規劃網站頁面、API、工具頁、後台功能時。

再往深一點看

Route（路由）定義了每個網址（URL）應該由哪段程式碼處理——可能是渲染一個頁面，也可能是執行一段 API 邏輯。在 Next.js App Router 裡，你在 app/ 目錄的資料夾結構就是路由結構：建一個 app/dashboard/page.tsx，/dashboard 這個網址就自動存在。Route 有「靜態路由」（固定網址如 /about）和「動態路由」（含參數如 /user/[id]）之分；動態路由讓你用同一份 component 處理無數個使用者頁面。Route 的設計直接影響 SEO 和 metadata：清楚的網址結構讓搜尋引擎更好理解每頁的內容。

舉個例子

你做一個履歷平台，每位使用者有自己的公開頁面。在 Next.js 建立 app/profile/[username]/page.tsx，網址 /profile/victor 和 /profile/alice 都會走同一個 component，只是抓到不同的 username 參數，再向 Supabase 查對應的履歷資料並渲染。

常見誤解

- API 路由和頁面路由命名混亂（如 /getUser、/user-list、/userData 同時存在），上線後自己都忘記哪個在用，維護時要全站搜尋才能找到對的網址。
- 動態路由沒有處理「找不到」的情況，使用者輸入不存在的 /profile/nobody 就看到 500 錯誤或空白頁面，應該要顯示清楚的 404 頁面。
- 把需要保護的管理後台路由（如 /admin）只用前端隱藏導覽連結，忘記在 API 層加權限驗證，知道網址的人直接就能存取。