專案組織和檔案共同定位

除了 路由資料夾和檔案慣例 之外，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 支援 模組路徑別名，這使得在深度巢狀的專案檔案中讀取和維護導入變得更容易。

// before
import { Button } from '../../../components/button'
 
// after
import { Button } from '@/components/button'

專案組織策略

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

將專案檔案儲存在 app 之外

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

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

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

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

此策略將全域共用的應用程式程式碼儲存在根 app 目錄中，並將更具體的應用程式程式碼**分割**到使用它們的路由區段中。