30、Next.js 应用布局与组件开发全解析

Next.js 应用布局与组件开发全解析

1. 布局定义

布局是服务器组件，用于定义特定路由段的用户界面。当该路由段处于活动状态时，Next.js 会渲染此布局。布局可在所有页面间共享，能相互嵌套，特定路由及其子路由的所有布局会在该路由段激活时渲染。

以下是 components/weather 路由的 URL、文件和组件层次关系示例：
| 浏览器 URL | 文件 | 根目录 | 简化渲染结构 |
| — | — | — | — |
| localhost:3000 | app/layout.tsx | app 目录 | <Root Layout> |
| | components/layout.tsx | | <Segment Layout> |
| | weather/layout.tsx | | <Leaf Layout> |
| | weather/page.tsx | | <Page Content /> |

在这个例子中，每个文件夹都包含一个 layout.tsx 文件，Next.js 会以嵌套方式渲染这些文件，并将页面内容作为最终渲染组件。虽然可以在布局中获取数据，但无法在父布局和子布局之间共享数据。不过