最佳實務:NextJS 13 資料夾結構
P粉131455722
P粉131455722 2023-10-22 10:36:38
0
1
794

我正在學習使用NextJS,並且正在使用App Router 的最新版本,我目前陷入如何進行路由的困境,例如將註冊和登錄頁面及其資料夾結構放在哪裡一般來說,我在哪裡放置組件以及如何將其他相關組件組合在一起,您能否闡明這個主題,並請使其盡可能簡單,也許可以舉一些例子,因為我仍在學習,任何幫助將不勝感激,謝謝!

P粉131455722
P粉131455722

全部回覆(1)
P粉786800174

我認為閱讀下一篇文件中的這一部分可以幫助您組織專案資料夾:

https://nextjs.org/docs/app/building-您的應用程式/路由/託管

我嘗試了許多不同的結構,最後選擇了這個:

  1. 所有內容(所有資料夾和檔案)都將位於 /app 目錄中,因為 /app 目錄接受共置,並且它與僅用於路由目的的 /pages 目錄不同。這樣 /app 目錄就可以假定為新的 /src 目錄。

  2. 所有非路由資料夾都將成為私人資料夾,方法是在其名稱前添加下劃線(如上面的連結所述)。這告訴下一個路由器該資料夾不是路由的一部分。 (例如_components、_libs、...)

  3. 至此,我們確定每個帶下劃線(_) 的資料夾都不是路由,而其他不帶下劃線的資料夾是路由系統的一部分(儘管資料夾中包含page.tsx 或page.js檔案是路由系統的一部分)成為路由系統一部分的另一個條件),但我使用了另一個Next 13 功能,它是路由組(如上面的連結所述)。它將資料夾名稱括在括號中,以便顯示該資料夾用於組織目的(分組資料夾),並且不應包含在路由的 URL 路徑中,例如(路線)。

根據這些原則,我將所有必需的資料夾放在/app 目錄中,並且使用路由組將我的所有路由分組到“(routes)”資料夾中,使用私有資料夾透過在非路由文件夾前加上下劃線前綴,所有內容都是孤立的。

下圖是上述所有要點的總結。

希望該連結和我組織專案資料夾的方式對您有所幫助。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板