Next.js 组件与布局（快速上手）

核心概念

Next.js 组件与布局是构建现代 Web 应用的基础模块化单元。组件封装可复用的 UI 片段（如按钮、表单），布局则定义应用的共享结构（如导航栏、页脚）。通过组合使用，开发者可以像搭积木一样构建复杂界面，同时确保样式和功能的统一性。

基础语法

页面组件

// pages/index.tsx
export default function Home() {
  return (
    <main>
      <h1>首页</h1>
      <p>欢迎访问我的 Next.js 应用</p>
    </main>
  )
}

页面组件直接定义路由路径，组件内容对应页面渲染

全局布局

// components/Layout.tsx
function Layout({ children }) {
  return (
    <div>
      <header>全局导航栏</header>
      <div>{children}</div>
      <footer>统一页脚</footer>
    </div>
  )
}

export default Layout

通过 children prop 实现内容注入，保持布局结构一致性

嵌套布局

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div>
      <nav>仪表盘专用导航</nav>
      <section>{children}</section>
    </div>
  )
}

Next.js 13+ 的 app 目录结构支持嵌套布局，父级布局包裹子级组件

进阶特性

特性 说明 代码示例
布局嵌套 支持多级布局结构 
// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Layout>{children}</Layout>
      </body>
    </html>
  )
}
``` |
| 动态布局 | 根据路由参数切换布局 |
```tsx
// app/[slug]/layout.tsx
export default function DynamicLayout({ children, params }) {
  return (
    <div>
      <h2>{params.slug} 页面</h2>
      {children}
    </div>
  )
}
``` |
| Server Components | 布局组件支持服务端渲染 |
```tsx
// app/layout.tsx
"use server"
export default function ServerLayout({ children }) {
  return <div>{children}</div>
}
``` |

## 实战应用
### 仪表盘页面布局
```tsx
// app/dashboard/page.tsx
import DashboardLayout from '@/components/DashboardLayout'

export default function DashboardPage() {
  return (
    <DashboardLayout>
      <div>数据看板内容</div>
      <div>图表展示区域</div>
    </DashboardLayout>
  )
}

嵌套布局实现仪表盘专属结构，保持与全局布局的协同

电商产品页

// app/products/[id]/page.tsx
export default function ProductPage({ params }) {
  return (
    <div>
      <h1>商品 {params.id}</h1>
      <div>商品详情</div>
      <div>用户评价</div>
    </div>
  )
}

动态路由参数自动匹配对应布局，实现个性化页面

注意事项

  1. 组件职责分离：避免将布局组件与页面组件混用。布局应专注于结构定义，页面组件负责具体业务逻辑
  2. 过度嵌套风险：超过 3 层嵌套布局时，考虑使用组合式设计。例如：
// 优化前
<RootLayout>
  <DashboardLayout>
    <ProductLayout>
      <PageContent />
    </ProductLayout>
  </DashboardLayout>
</RootLayout>

// 优化后
<RootLayout>
  <DashboardLayout>
    <ProductLayout>
      <PageContent />
    </ProductLayout>
  </DashboardLayout>
</RootLayout>
  1. 动态布局性能：使用 next/dynamic 加载非关键布局组件：
import dynamic from 'next/dynamic'

const Sidebar = dynamic(() => import('@/components/Sidebar'), {
  loading: () => <div>加载中...</div>
})

总结

Next.js 组件与布局机制通过模块化设计和嵌套结构，实现了可维护的复杂界面构建模式，是现代 React 项目开发的核心实践。