Open Source Daily Issue 1091: Popular React Framework - Next.js
内容提要
开源日报推荐了Next.js和一篇关于在Next.js中使用模板文件的英文原文。Next.js是一个流行的React框架，可创建高质量的Web应用程序。模板文件和布局文件在接受props方面有所不同，布局文件在路由之间保持状态，而模板文件在每次导航时创建新实例。可以将模板文件转换为客户端和服务器组件，并使用React Hook。布局文件和模板文件在Next.js中有不同的用途。
延伸解读
模板与布局的核心差异：状态保持与重新渲染
文章指出，布局文件在路由间保持状态且只渲染一次，而模板文件在每次导航时创建新实例并重新渲染。这意味着若组件需要跨路由保持状态（如全局导航栏），应使用布局文件；若需要每次导航都重新执行动画或重置状态，则模板文件更合适。
模板文件支持客户端组件与React Hook
模板文件可以转换为客户端组件，从而使用useState、useEffect等React Hook。文章示例展示了在模板文件中使用计数器状态和副作用，说明模板文件具备完整的客户端交互能力，适合需要动态行为的场景。
布局文件转为客户端组件的限制：无法使用metadata
虽然布局文件也能转为客户端组件并使用Hook，但文章警告这样做会导致无法导出metadata，并会触发错误。因此，若布局需要定义元数据，应保持为服务器组件，避免添加'use client'指令。
Props接收差异：模板仅接受children
模板文件只接受children作为参数，而布局文件可以同时接受children和params。文章强调，若在模板中尝试访问params或searchParams，将得到undefined。因此，需要访问路由参数时，应使用布局文件而非模板文件。
Q&A
Next.js 是什么？它有什么用途？
Next.js 是一个流行的 React 框架，被世界上一些最大的公司使用，让你能够使用 React 组件的强大功能创建高质量的 Web 应用程序。
Next.js 中模板文件和布局文件的主要区别是什么？
主要区别在于：布局文件在路由之间保持状态，只渲染一次；而模板文件在每次导航时创建新实例，每次渲染都会重新生成。
如何在 Next.js 中创建和使用模板文件？
在 app 文件夹中创建 template.tsx 或 template.jsx 文件，默认导出一个接收 children 属性的组件，例如：export default function Template({ children }: { children: React.ReactNode }) { return <div>{children}</div> }。
模板文件可以转换为客户端组件并使用 React Hook 吗？
可以。将模板文件转换为客户端组件后，可以使用任何 React Hook，例如 useState 和 useEffect。
模板文件和布局文件在接受 props 方面有什么不同？
模板文件只接受 children 属性作为参数；而布局文件接受 children 和 params 两个属性。如果尝试在模板文件中访问 params 或 searchParams，会得到 undefined。
在 Next.js 中，布局文件和模板文件分别适用于什么场景？
布局文件更常用，适用于需要保持状态的场景；模板文件适用于每次导航都需要重新渲染的场景。
