專案組織與檔案共置

除了路由資料夾與檔案慣例外，Next.js 對於專案檔案的組織與共置方式採取無強制意見的態度。

本頁將分享預設行為與可用於組織專案的功能。

• 預設的安全共置
• 專案組織功能
• 專案組織策略

預設的安全共置

在 app 目錄中，巢狀資料夾結構定義了路由結構。

每個資料夾代表一個路由片段，對應到 URL 路徑中的相應區段。

然而，儘管路由結構是透過資料夾定義的，但只有在路由片段中加入 page.js 或 route.js 檔案後，該路由才會公開可存取。

而且，即使路由已公開可存取，只有 page.js 或 route.js 回傳的內容會被傳送至客戶端。

這意味著專案檔案可以安全地共置於 app 目錄的路由片段中，而不會意外成為可路由的內容。

須知：

• 這與 pages 目錄不同，在 pages 中任何檔案都會被視為路由。
• 雖然您可以將專案檔案共置於 app 中，但並非必須如此。若您偏好，也可以將它們存放在 app 目錄外。

專案組織功能

Next.js 提供了多項功能協助您組織專案。

私有資料夾

可透過在資料夾名稱前加上底線來建立私有資料夾：_folderName

這表示該資料夾是私有實作細節，不應被路由系統考慮，從而讓該資料夾及其所有子資料夾退出路由。

由於 app 目錄中的檔案預設可以安全共置，因此共置時不需要私有資料夾。但它們在以下情況很有用：

• 將 UI 邏輯與路由邏輯分離。
• 在專案與 Next.js 生態系統中一致地組織內部檔案。
• 在程式碼編輯器中排序與分組檔案。
• 避免與未來 Next.js 檔案慣例的命名衝突。

須知

• 雖然這不是框架慣例，但您也可以考慮使用相同的底線模式來標記私有資料夾外的檔案為「私有」。
• 可透過在資料夾名稱前加上 %5F（底線的 URL 編碼形式）來建立以底線開頭的 URL 片段：%5FfolderName。
• 若不使用私有資料夾，建議了解 Next.js 的特殊檔案慣例以避免意外的命名衝突。

路由群組

可透過將資料夾用括號包圍來建立路由群組：(folderName)

這表示該資料夾僅用於組織目的，不應包含在路由的 URL 路徑中。

路由群組適用於：

• 將路由分組組織，例如按網站區塊、用途或團隊。
• 在同一路由片段層級啟用巢狀佈局：
  • 在同一片段中建立多個巢狀佈局，包括多個根佈局
  • 為共用片段中的路由子集添加佈局

src 目錄

Next.js 支援將應用程式碼（包括 app）存放在可選的 src 目錄中。這可將應用程式碼與主要位於專案根目錄的專案設定檔分開。

模組路徑別名

Next.js 支援模組路徑別名，讓深度巢狀的專案檔案中的導入更易讀且易維護。

// 之前
import { Button } from '../../../components/button'

// 之後
import { Button } from '@/components/button'

專案組織策略

在 Next.js 專案中組織檔案與資料夾沒有「正確」或「錯誤」的方式。

以下部分列出了常見策略的高層次概述。最簡單的原則是選擇適合您與團隊的策略，並在整個專案中保持一致。

須知：在以下範例中，我們使用 components 和 lib 資料夾作為通用佔位符，其命名並無特殊框架意義，您的專案可能會使用其他資料夾如 ui、utils、hooks、styles 等。

將專案檔案存放在 app 外

此策略將所有應用程式碼存放在專案根目錄的共享資料夾中，並保持 app 目錄純粹用於路由目的。

將專案檔案存放在 app 內的頂層資料夾中

此策略將所有應用程式碼存放在 app 目錄根部的共享資料夾中。

按功能或路由拆分專案檔案

此策略將全域共享的應用程式碼存放在 app 根目錄，並將更特定的應用程式碼拆分到使用它們的路由片段中。