跳到主內容

【Next.js】Private Folders

在 Next.js 中,**Private Folders(私有資料夾)**是指:

🔒 不會被當作路由、自動產生頁面或靜態資源的資料夾
這些資料夾的名稱 開頭是底線 _ 或雙底線 __,也就是說:

✅ 資料夾名稱開頭為 ___ ⇒ Next.js 會自動忽略它


🔍 什麼是 Private Folders?

這是 Next.js 的一項慣例(convention),用來 隔離你不想當作頁面處理的輔助程式碼或元件檔案


📁 使用範例

假設你有以下結構:

app/
├── page.tsx
├── _utils/              ← ✅ 不會當成路由
│   └── formatter.ts
├── __tests__/           ← ✅ 不會當成路由
│   └── page.test.tsx

這些 _utils/__tests__/ 都是 Private Folders

  • 不會產生 /utils 路由

  • 不會被包含在 build 出來的頁面中

  • 適合放測試、工具、常數、hooks 等程式碼


✅ 實用用途

資料夾名稱 用途範例
_utils/ 放工具函式(e.g. dateFormat)
_hooks/ 放自訂 React Hook
__tests__/ 放單元測試
__mocks__/ 放 Jest mock 資料

🧠 注意事項

行為 說明
✅ 允許 import 使用 Private folders 裡的檔案仍然可以被引用
❌ 不會產生 URL 不會出現像 /__tests__ 這種頁面
✅ 適用於 pages/app/ 架構 兩種路由系統都支援
⚠️ 無法自訂規則 Next.js 只會根據 ___ 開頭自動判斷

📝 範例:使用 _utils/format.ts

// app/_utils/format.ts
export function formatCurrency(amount: number) {
  return `$${amount.toFixed(2)}`
}
// app/products/page.tsx
import { formatCurrency } from '../_utils/format'

export default function ProductPage() {
  return <p>{formatCurrency(123.456)}</p>
}

✅ 小結

項目 說明
命名規則 資料夾名稱開頭為 ___
功能 不產生頁面、不加入 build 路由
適合用途 工具、hook、測試、mock、常數
是否能 import ✅ 可以被引用使用

需要我幫你設計一個實際的 private folders 結構範本嗎?或搭配 testing library 使用?