layout.tsx

创建布局文件，布局是在多个页面之间共享的 UI，在路由跳转时，layout 不会重新渲染，会保持内部状态

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        {/* Place children where you want to render a page or nested layout */}
        <main>{children}</main>
      </body>
    </html>
  )
}

layout 的 props 接受一个 children 属性，children 就是页面（page.tsx）的具体内容

最佳实践

抽取每个页面都要用的东西（如导航栏、侧边栏、底部信息）成单独的组件，然后在 layout 里引入这个组件即可

page.tsx

路由对应的真正的网页内容