Next.js 布局

发表于

基础布局

布局是在应用程序的多个页面之间共享的 UI。 layout.tsx 文件会用来包裹页面的内容，它接受一个 children 属性，并在布局中渲染。

根布局的示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// app/layout.tsx
export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

文件结构示例：

1
2
3
4
app
 ├─ layout.tsx       # 根布局
 └─ about
     └─ page.tsx     # about 页面

渲染流程：
about/page.tsx 内容 → app/layout.tsx 布局中渲染

嵌套布局

如果在某个子目录（如 about）中创建一个 layout.tsx，
则该布局会只作用于该目录及其子路由。

显示层级：

about/page.tsx → about/layout.tsx → app/layout.tsx

这样可以为某些页面单独定制布局，而不影响全局。

多个根布局

Next.js 支持 路由分组 (Route Groups) 来实现多个根布局。
1. 创建一个路由分组目录（名称用括号括起来，如 (admin)）
2. 在分组目录下添加自己的 layout.tsx，该布局将只作用于分组内的页面。

示例结构：

1
2
3
4
5
6
7
8
9
10
app
 ├─ (admin)
 │   ├─ layout.tsx     # admin 专属布局
 │   └─ dashboard
 │       └─ page.tsx
 └─ (shop)
     ├─ layout.tsx     # shop 专属布局
     └─ products
         └─ page.tsx

这样 (admin) 和 (shop) 互不干扰，各自拥有不同的根布局。

总结

  • layout.tsx 用于定义布局，接收 children。
  • 根布局放在 app/layout.tsx。
  • 嵌套布局放在子目录中，只影响该目录。
  • 使用路由分组可实现多个独立的根布局。