Next.js 应用目录与路由分组：构建灵活的页面布局
Next.js 的应用目录（app 目录）是组织路由和布局的关键。app 目录中通常包含 layout.jsx 和 page.jsx 文件，分别定义全局布局和页面内容。
全局布局 (app/layout.jsx)
app 目录根部的 layout.jsx 文件定义了所有页面的全局布局。除非另行指定，所有页面都将继承这个布局。
为首页创建专用布局
有时，我们需要为首页（/ 路径）创建独立的布局，与其他页面有所区别。这时，Next.js 的路由分组功能就派上用场了。路由分组允许我们组织路由，而不改变 URL 结构。
解决方案：利用路由分组
实现方法如下：
目录结构：
app
├── layout.jsx # 全局布局，应用于除首页外的所有页面
└── (home)
├── layout.jsx # 首页专用布局
├── page.jsx # 首页内容
关键步骤：
-
文件夹命名: 使用括号
()包裹文件夹名(home)，表示这是一个路由分组。这不会改变 URL 路径，首页仍通过/访问。 -
文件移动: 将
page.jsx移动到(home)文件夹，并在该文件夹内创建layout.jsx，定义首页的专用布局。
效果：
-
app/layout.jsx定义的全局布局将应用于所有非首页路由。 -
app/(home)/layout.jsx定义的布局只应用于首页/，使首页拥有独特的样式或行为。
优势：
- 模块化: 独立定制每个路由或路由组的布局，提高代码可维护性。
- SEO 和 UX: 针对不同页面优化 SEO 或提升用户体验。
注意事项：
- 严格遵守路由分组的命名约定（使用括号），避免路由冲突。
通过这种方法，我们可以保持目录结构清晰，同时实现灵活的页面布局设计，让网站的每个部分都能拥有独特的个性和结构，而不会影响 URL 路径。 您可以根据实际需求调整和扩展此方法。
