NextJs：如何為索引頁建立專用佈局文件

了解 Next.js 版面配置與路由分組

在 Next.js 中，應用程式目錄充當應用程式路由和佈局結構的基礎。在此目錄中，您通常會找到layout.jsx 和page.jsx 檔案。

根佈局 (app/layout.jsx)
用途：app 資料夾根部的layout.jsx 充當根佈局。這意味著除非另有說明，否則在此佈局中呈現的所有頁面（子元件）都會套用至所有路由。

首頁專用版面
有時，您可能希望根頁面或索引頁面 (/) 有自己的特定佈局，與全域佈局不同。以下是使用路由分組來實現此目標的方法：

*解決方案：*使用路由分組
Next.js 中的路由分組可讓您以不影響 URL 結構的方式組織路由。實作方法如下：

目錄結構：

app
├── layout.jsx         # Root layout for all pages
└── (home)
    ├── layout.jsx     # Dedicated layout for the root ('/') page
    ├── page.jsx       # The index or root page

*實作細節：*
資料夾命名：在資料夾名稱周圍使用括號 () 來指示它用於路由分組。在這種情況下，(home) 不會更改 URL 路徑；該頁面仍可透過「/」存取。
移動檔案：將 page.jsx 移至（主）資料夾中，並在此資料夾中建立一個layout.jsx，用於此頁面的特定佈局。

*這樣做：*

全域佈局 (app/layout.jsx) 將套用於除 '/' 之外的所有其他路由。
專用佈局 (app/(home)/layout.jsx) 僅適用於根路徑，僅允許主頁具有獨特的樣式或行為。

*好處：*

模組化：您可以獨立自訂每條路線或每組路線的體驗。
SEO 和 UX：不同的佈局可以優化 SEO 或增強特定頁面的使用者體驗。

*注意事項：*

確保嚴格遵循路由組的命名約定（使用括號）以避免路由問題。

這種方法不僅可以保持目錄結構整潔，還可以進行靈活的設計，使網站的每個部分都可以擁有自己的個性或結構，而不會影響 URL 路徑。

請隨意根據您的特定用例進一步調整。

以上是NextJs：如何為索引頁建立專用佈局文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！