了解 Next.js 中的模板文件完整指南-js教程-PHP中文网

理解模板文件

模板与布局：比较

在模板和布局之间进行选择

说明性示例：输入重置行为

使用模板进行动态内容处理

最佳实践

结论

首页

web前端

js教程

了解 Next.js 中的模板文件完整指南

DDD

Jan 22, 2025 am 10:39 AM

Next.js 15 引入了 template 文件，它与 layout 相对应，提供对导航期间布局行为的精细控制。本指南阐明了 template 和 layout 之间的区别，概述了它们的应用程序和最佳实践。

Understanding Template Files in Next.js The Complete Guide

理解模板文件

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>

登录后复制

搜索输入会随着每个类别的更改而重置，从而提供干净的用户体验。