基本页面
在 Next.js 中，页面是由 app 目录中的 .tsx 文件自动生成的。每个 .tsx 文件代表一个 URL 路径。
// app/page.tsx export default function HomePage() { return ( <div> <h1>Welcome to the Home Page</h1> </div> ); }
创建了一个基本的主页组件。该文件将对应于根路径 /。
动态路由
可以通过方括号来创建动态路由
// app/blog/[id]/page.tsx export default function BlogPost({ params }: { params: { id: string } }) { return ( <div> <h1>Blog Post ID: {params.id}</h1> </div> ); }
文件对应于 /blog/:id 路径，其中 id 是动态参数。
布局组件
布局组件通常用于共享页面间的通用结构，比如导航栏、页脚等。Next.js 14 通过 layout.tsx 文件来定义布局。
全局布局
全局布局文件通常放置在 app 目录的根目录下，应用于所有页面。
在 layout.tsx 中，children 代表当前页面内容，因此 main 部分会动态渲染不同页面的内容。
// app/layout.tsx export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body> <header> <nav>/* 导航栏 */</nav> </header> <main>{children}</main> <footer>/* 页脚 */</footer> </body> </html> ); }
页面特定布局
如果某些页面需要特殊布局，可以在该页面的目录下创建一个 layout.tsx 文件.
// app/dashboard/layout.tsx export default function DashboardLayout({ children }: { children: React.ReactNode }) { return ( <div> <aside>/* 侧边栏 */</aside> <main>{children}</main> </div> ); }
全局布局与页面特定布局区别
- 全局布局：适用于整个应用程序的布局结构，通常包含全局导航、页脚和其他常见元素。在
app根目录下的layout.tsx文件中定义。 - 页面特定布局：只应用于某个页面或页面组的布局。在特定页面目录下的
layout.tsx文件中定义，可以用于实现不同页面的独特布局需求。
app/ ├── layout.tsx (全局布局) ├── page.tsx (主页) └── dashboard/ ├── layout.tsx (dashboard 页面特定布局) └── page.tsx (dashboard 主页)
最后
创建基本页面：使用 app 目录中的 .tsx 文件创建页面，每个文件代表一个 URL 路径。
全局布局：在 app/layout.tsx 中定义，应用于整个应用程序的所有页面。
页面特定布局：在特定页面目录下的 layout.tsx 中定义，只应用于该目录下的页面。
布局的层次结构：布局是嵌套的，全局布局包裹页面特定布局。
