next.js 路由分组：构建更清晰、更结构化的应用程序
Next.js 的路由分组功能，让您能够组织相关的路由，而不会影响 URL 结构，从而构建更清晰、更结构化的应用程序。如果您尚未尝试过，本文将为您详细介绍。
什么是 Next.js 路由分组？
路由分组可让您创建干净、结构化的路由，避免 URL 路径过于复杂。通过将文件夹用括号
括起来即可实现。
例如，在一个电子商务网站中，产品相关的路由（例如
或
）可以共享某些功能，而无需在 URL 中显示 "products"。
工作原理
如何在项目中使用路由分组
以下示例展示了如何使用
和
两个路由分组：
组：
处理身份验证相关的页面，例如登录和注册。
组：
组织需要保留导航栏的页面，例如主页。
为什么使用路由分组？
使用路由分组可以为不同的应用程序部分定义特定布局，避免代码重复。例如：
登录和注册页面不需要导航栏。
主页和其他主要页面需要导航栏，同时保持应用程序整体主题一致。路由分组可以有效解决这些问题，而无需修改 URL 路径。
实现步骤
步骤 1：创建路由组
在
目录下创建
和
两个文件夹：
: 包含登录和注册页面，并排除导航栏。
: 包含导航栏组件，确保其显示在主页和其他相关页面上。
步骤 2：定义每个路由组的布局
首先，从全局根布局中移除导航栏：
这是应用程序的核心布局，负责处理主题切换、元数据和全局上下文。
然后，创建
组的布局，包含导航栏：
步骤 3：构建 (auth) 布局和页面
布局不包含导航栏，提供专门用于身份验证页面的布局。
在
文件夹下，创建登录和注册文件夹，每个文件夹包含
文件：
重要性
使用路由分组有三大优势：
避免代码重复：
避免在多个文件中重复布局代码。
保持 URL 清晰：
URL 路径保持简洁，用户友好，例如无需
自定义布局：
确保应用程序的每个部分都有其自定义的布局，而不会影响全局设计。
总结
在 Next.js 项目中，路由分组是一个强大的功能，可以帮助您构建更清晰、更易于维护的应用程序。它有助于动态处理布局，同时保持 URL 结构简洁有序。 无论是构建主页、身份验证流程，还是管理面板，路由分组都能帮助您创建符合设计需求的布局。
()/shoes/bagsapp/
(products)/
shoes/
page.tsx → /shoes
bags/
page.tsx → /bags(auth)(root)(auth)(root)app/(auth)(root)app/(auth)/app/(root)/(root)(auth)(auth)page.tsx/auth/sign-in