{JSON.stringify(params.slug)}
{formatCurrency(123.456)}
} ✅ 小結 項目 說明 命名規則 資料夾名稱開頭為 _ 或 __ 功能 不產生頁面、不加入 build 路由 適合用途 工具、hook、測試、mock、常數 是否能 import ✅ 可以被引用使用 這是一個非常好也非常細緻的問題，牽涉到 JavaScript / TypeScript 社群和工具生態中的 命名慣例（naming conventions），並不是 Next.js 特有的規定，而是社群共識。 🔍 TL;DR 結論 命名形式 用途 / 慣例 來源 _folder 🔒 私有資料夾，Next.js 慣例（前綴式） Next.js、社群通用慣例 __tests__ ✅ 測試資料夾，Jest 標準結構（雙底線前後） Jest 官方 __mocks__ ✅ Mock 資料夾，Jest 標準 Jest _filename.ts 私有或輔助用檔案（非主模組） Node / TypeScript 社群 ✅ 單底線 _：一般表示私有或特殊用途 _utils/、_hooks/、_internal/ 表示：這不是一個路由，也不是 API 端點，只是輔助邏輯用 這種用法來自許多框架（Django、Rails、Node.js）與社群習慣。 ✅ 雙底線 __：通常是工具/測試框架的保留命名 來自 Jest、React Native、Metro Bundler 等工具： __tests__ → Jest 會自動找出來執行單元測試 __mocks__ → Jest 用來定義自動 mock 資料 __snapshots__ → Jest 的 snapshot 測試檔案 👉 雙底線前後一致，通常代表「這是特殊目的目錄」，會被工具偵測與處理。 🧠 命名語意總整理 命名 語意 常見用途 _名稱 私有 / 忽略 / 特殊用途（Next.js 慣例） _utils, _internal, _api __名稱__ 測試工具專用 __tests__, __mocks__ 無底線 公開模組 / 頁面 / API 等 products, user, api ✅ Next.js 怎麼處理這些命名？ 資料夾名稱 是否會轉成路由？ 用途建議 products/ ✅ 是 頁面 _products/ ❌ 否 工具 / 非頁面模組 __tests__/ ❌ 否 單元測試、快照測試用 📌 延伸知識：為何不是 _tests/ 而是 __tests__？ 這來自 Unix / Bash 與正規表達式處理的傳統： __tests__ 這種明確結構更容易在工具中用 glob 匹配，如： find . -name '__tests__' jest "**/__tests__/**/*.test.tsx" 這是 Jest 與 Babel 的官方推薦格式。 ✅ 總結 命名類型 意圖 / 工具支援 _xxx/ Next.js 私有目錄，僅開頭底線 __xxx__/ Jest 風格目錄，工具自動識別處理 _xxx.ts 單一檔案私有語意 此外通常utils 其他分類資料夾只要不在app 下就不會產生路由，也是一種常用的方法 【Next.js】Route Groups 在 Next.js 的 App Router 架構中，Route Groups 是一個非常實用的功能，用來： ✅ 分組路由檔案，但不會影響 URL 路徑或頁面路由。 🗂️ Route Groups 是什麼？ 語法：用括號 () 包住資料夾名稱 例如： app/ ├── (dashboard)/ │ └── analytics/ │ └── page.tsx ← URL: /analytics（不會變成 /dashboard/analytics） ✅ 路徑中的 (dashboard) 不會出現在網址上 但它可以讓你組織頁面、套用 layout。 📌 使用場景 使用目的 說明 組織頁面結構 讓你的 app 資料夾更乾淨、更有結構 不同區段共用不同 layout 例如 (marketing)、(admin)、(auth) 區塊使用不同 layout 不污染 URL URL 不包含 group 名稱，例如 (admin)/users → /users ✅ 範例 1：基本 Route Group app/ ├── (marketing)/ │ └── home/ │ └── page.tsx 訪問路徑： /home ✅不會是： /marketing/home ❌ ✅ 範例 2：共用 layout 的 Route Group app/ ├── (auth)/ │ ├── layout.tsx ← auth 區塊專用 layout │ ├── login/ │ │ └── page.tsx ← `/login` │ └── register/ │ └── page.tsx ← `/register` 👉 /login 和 /register 頁面都會套用 (auth)/layout.tsx ✅ 範例 3：巢狀 Route Groups app/ ├── (admin)/ │ ├── layout.tsx │ └── users/ │ └── page.tsx ← `/users` ├── (marketing)/ │ └── about/ │ └── page.tsx ← `/about` 每個 group 都可以有自己專屬的 layout.tsx，但網址仍保持扁平化。 💡 搭配 not-found.tsx、error.tsx、loading.tsx 你可以在 group 中設： app/ ├── (admin)/ │ ├── layout.tsx │ ├── not-found.tsx │ ├── error.tsx │ └── dashboard/ │ └── page.tsx 這樣 group 中的所有路由都會共用這些錯誤/狀態處理頁。 🚫 Route Groups 的注意事項 問題 說明 Group 名稱不能用 / 或 - 只能用括號與英文小寫（無實際路徑名稱） 不能與實體 URL 混用 app/(admin)/users 是 /users，不是 /admin/users 沒有 generateStaticParams() Route Group 自身不是 route，不能設 page.tsx ✅ 小結 特性 說明 語法 (group-name)/ 是否會影響 URL？ ❌ 不會，純粹是分組與結構管理用途 支援 layout 嗎？ ✅ 支援，可針對 group 套用專屬 layout 適合什麼用途？ 管理大型專案，區分功能區域（如 admin/auth/marketing） 【Next.js】Layout 太好了！以下是為「Next.js 初學者」量身打造的教學文章，主題為： 🔍 Next.js App Router 中 layout.tsx、page.tsx、children 的邏輯與實作 🧠 為什麼要了解這三個東西？ 在 Next.js 的 App Router 架構中，整個畫面的內容是由許多層「外殼（layout）」與「內頁（page）」所組合而成。而這個組合的核心，就是這三個角色： layout.tsx：整體框架的「容器」 page.tsx：實際對應到網址的「頁面內容」 children：layout 內部接收的下一層內容（可能是 page，也可能是下一層 layout） 🔧 這三者的關係是什麼？ 你可以想像畫面組成就像是便當盒： layout.tsx 就是便當盒（框架） page.tsx 是便當裡的菜色（內容） children 是 layout.tsx 中的佔位符，用來「放內容的地方」 👉 換句話說： page.tsx 的畫面內容，會自動傳給上層 layout.tsx 中的 children 來顯示 🧱 結構範例 app/ ├── layout.tsx ← 全站框架 Layout ├── page.tsx ← 首頁 `/` ├── about/ │ └── page.tsx ← `/about` 頁面 📦 layout.tsx 實際程式碼 export default function RootLayout({ children }: { children: React.ReactNode }) { return (