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中文网其他相关文章！
