Next.js 15 引入了 template 文件，它與 layout 相對應，提供對導航期間佈局行為的精細控制。本指南闡明了 template 和 layout 之間的區別，概述了它們的應用程式和最佳實踐。
Next.js template 檔案定義可重複使用的佈局，可在頁面轉換時重新整理其狀態或重新渲染。這與 layout 不同，後者在轉換之間保留狀態。
| Feature | Layout | Template |
|---|---|---|
| State Persistence | Retains state during route changes. | Resets state on each route change. |
| Reusability | Provides consistent layouts across pages. | Similar to `layout`, but ensures fresh rendering for every page. |
| Use Cases | Ideal for persistent elements like headers, sidebars, or footers. | Suitable for layouts needing resets or re-initialization per route, such as forms or dynamic content. |
| Rendering | Doesn't re-render between sibling routes. | Re-renders with every route change. |
以下情況使用 template：
以下情況使用 layout：
此範例突顯了 layout 和 template 差異。
使用layout（狀態持續）：
<code>// app/layout.tsx
import './globals.css';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<p>Header Content</p>
{children}
</body>
</html>
);
}</code>layout 不會重新渲染。 使用template（狀態重置）：
<code>// app/template.tsx
import './globals.css';
export default function RootTemplate({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<p>Header Content</p>
{children}
</body>
</html>
);
}</code>template 強制重新渲染，輸入值會在每次路線變更時重置。 template 擅長管理動態內容。 在電子商務應用程式中，template 檔案可確保在產品類別之間導航時重置篩選器或搜尋輸入。
範例：動態產品濾波
<code>// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
return (
<main><h1>Shop</h1>
{children}
</main>
);
}</code>搜尋輸入會隨著每個類別的變更而重置，從而提供乾淨的使用者體驗。
評估狀態需求： 使用 layout 實現持久狀態（導航、驗證）；使用 template 重設狀態敏感元件（表單、動態篩選器）。
避免過度使用範本： template 很有價值，但過度使用會導致不必要的重新渲染。有利於靜態或動態較小的組件layout。
優先考慮效能：保持模板簡潔，避免複雜的計算或大型元件。
測試導航：驗證您的layout/template選擇是否符合使用者體驗，特別是對於表單或模態等互動元素。
理解 Next.js 15 中 layout 和 template 之間的區別對於建立高效且用戶友好的應用程式至關重要。 layout 提供持久性和穩定性，而 template 提供狀態重置和動態重新渲染的靈活性。 有效使用這兩個功能可以產生高效能且直覺的應用程式。
我們在 LinkedIn 或 GitHub 上聯絡吧？
以上是了解 Next.js 中的範本檔案完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
