Next.js 路由组：优雅的组织代码-北京尧图网络

文章目录什么是路由组核心特性速览基础用法快速入门项目结构示例1. 认证路由组2. 电商路由组高级应用场景场景 1多布局系统场景 2多租户 SaaS 应用场景 3A/B 测试和特性开关路由组与平行路由的结合最佳实践和技巧1. 命名约定2. 避免过度嵌套3. 共享组件和工具4. 组特定的中间件常见问题解答Q: 路由组会影响 SEO 吗Q: 可以在路由组中使用动态路由吗Q: 路由组支持 catch-all 路由吗Q: 如何在不同组之间共享布局什么是路由组路由组允许你将相关的路由组织在一起不会影响实际的 URL 路径结构。通过将文件夹用括号括起来(folder_name)你可以创建逻辑分组让项目结构更清晰同时保持 URL 的简洁性。核心特性速览特性说明示例不影响 URL分组不会出现在浏览器地址栏(auth)/login→/login逻辑组织相关路由可以放在一起(shop)/products,(shop)/cart共享布局组内路由可以共享特定布局(admin)组使用管理后台布局灵活嵌套支持多层级分组(platform)/(web)/dashboard基础用法快速入门项目结构示例app/ ├── (auth)/ │ ├── login/ │ │ └── page.js │ ├── register/ │ │ └── page.js │ └── layout.js ├── (shop)/ │ ├── products/ │ │ └── page.js │ ├── cart/ │ │ └── page.js │ └── layout.js ├── layout.js └── page.js1. 认证路由组// app/(auth)/layout.js - 认证相关布局exportdefaultfunctionAuthLayout({children}){return(div classNameauth-layoutdiv classNameauth-containerdiv classNameauth-backgroundh1欢迎使用我们的服务/h1/divdiv classNameauth-form-area{children}/div/div/div);}// app/(auth)/login/page.jsexportdefaultfunctionLoginPage(){return(div classNameauth-formh2用户登录/h2forminput typeemailplaceholder邮箱地址/input typepasswordplaceholder密码/button typesubmit登录/button/formp还没有账号a href/register立即注册/a/p/div);}访问路径/login注意URL 中没有(auth)2. 电商路由组// app/(shop)/layout.js - 电商相关布局exportdefaultfunctionShopLayout({children}){return(div classNameshop-layoutheader classNameshop-headernava href/products商品/aa href/cart购物车/a/nav/headermain classNameshop-main{children}/main/div);}高级应用场景场景 1多布局系统对于复杂的应用你可能需要多种不同的布局app/ ├── (marketing)/ │ ├── layout.js # 营销页面布局 │ ├── page.js # 首页 → / │ ├── about/ │ │ └── page.js # 关于我们 → /about │ └── pricing/ │ └── page.js # 价格页面 → /pricing ├── (app)/ │ ├── layout.js # 应用内布局 │ ├── dashboard/ │ │ └── page.js # 仪表盘 → /dashboard │ └── settings/ │ └── page.js # 设置 → /settings └── layout.js # 根布局// app/(marketing)/layout.jsexportdefaultfunctionMarketingLayout({children}){return(div classNamemarketing-layoutheader classNamemarketing-headernava href/首页/aa href/about关于/aa href/pricing价格/aa href/dashboard进入应用/a/nav/header{children}footer classNamemarketing-footerp©2024公司名称/p/footer/div);}// app/(app)/layout.jsexportdefaultfunctionAppLayout({children}){return(div classNameapp-layoutaside classNamesidebarnava href/dashboard仪表盘/aa href/settings设置/aa href/返回官网/a/nav/asidemain classNameapp-main{children}/main/div);}场景 2多租户 SaaS 应用app/ ├── (saas)/ │ ├── (admin)/ │ │ ├── layout.js │ │ ├── users/ │ │ │ └── page.js # /users │ │ └── analytics/ │ │ └── page.js # /analytics │ ├── (user)/ │ │ ├── layout.js │ │ ├── profile/ │ │ │ └── page.js # /profile │ │ └── projects/ │ │ └── page.js # /projects │ └── layout.js └── page.js// app/(saas)/layout.js - 根 SaaS 布局exportdefaultfunctionSaaSLayout({children}){return(div classNamesaas-layoutheader classNamesaas-headerh1企业 SaaS 平台/h1div classNameuser-menu用户菜单/div/header{children}/div);}// app/(saas)/(admin)/layout.jsexportdefaultfunctionAdminLayout({children}){constusergetCurrentUser();if(!user?.isAdmin){redirect(/unauthorized);}return(div classNameadmin-layoutaside classNameadmin-sidebarh3管理员面板/h3nava href/users用户管理/aa href/analytics数据分析/a/nav/asidediv classNameadmin-content{children}/div/div);}场景 3A/B 测试和特性开关app/ ├── (experiments)/ │ ├── (feature-a)/ │ │ └── dashboard/ │ │ └── page.js # 新版本仪表盘 │ ├── (feature-b)/ │ │ └── dashboard/ │ │ └── page.js # 另一个版本 │ └── dashboard/ │ └── page.js # 默认版本// 中间件根据用户分组路由exportfunctionmiddleware(request){constuserIdgetUserId(request);constuserGroupgetUserExperimentGroup(userId);if(request.nextUrl.pathname/dashboard){if(userGroupfeature-a){returnNextResponse.rewrite(newURL(/(experiments)/(feature-a)/dashboard,request.url));}elseif(userGroupfeature-b){returnNextResponse.rewrite(newURL(/(experiments)/(feature-b)/dashboard,request.url));}}returnNextResponse.next();}路由组与平行路由的结合路由组和平行路由可以强强联合创建极其灵活的架构app/ ├── (app)/ │ ├── sidebar/ │ │ ├── default.js │ │ └── navigation.js │ ├── header/ │ │ └── userinfo.js │ ├── layout.js │ └── dashboard/ │ └── page.js// app/(app)/layout.jsexportdefaultfunctionAppLayout({children,sidebar,header}){return(div classNameapp-layoutaside classNameapp-sidebar{sidebar}/asidediv classNameapp-mainheader classNameapp-header{header}/headermain classNameapp-content{children}/main/div/div);}最佳实践和技巧1. 命名约定# 好的命名(app)/(marketing)/(auth)/(api)/# 避免的命名[group]/{group}/ -group-/2. 避免过度嵌套# 推荐 - 清晰的扁平结构app/ ├──(auth)/ ├──(app)/ ├──(marketing)/ └──(api)/# 避免 - 过度嵌套app/ ├──(platform)/ │ ├──(web)/ │ │ ├──(app)/ │ │ └──(marketing)/ │ └──(mobile)/3. 共享组件和工具// 在组内共享组件 app/ ├── (ecommerce)/ │ ├── components/ │ │ ├── ProductCard.js │ │ └── ShoppingCart.js │ ├── hooks/ │ │ └── useCart.js │ ├── products/ │ └── cart/4. 组特定的中间件// middleware.jsexportfunctionmiddleware(request){// 认证组的路由保护if(request.nextUrl.pathname.startsWith(/login)||request.nextUrl.pathname.startsWith(/register)){returnhandleAuthRoutes(request);}// 管理组的路由保护if(request.nextUrl.pathname.startsWith(/admin)){returnhandleAdminRoutes(request);}}常见问题解答Q: 路由组会影响 SEO 吗A:不会。路由组只是开发时的组织工具不会影响最终的 URL 结构因此对 SEO 完全没有影响。Q: 可以在路由组中使用动态路由吗A:当然可以app/ ├── (shop)/ │ ├── products/ │ │ └── [id]/ │ │ └── page.js # /products/123 │ └── categories/ │ └── [slug]/ │ └── page.js # /categories/electronicsQ: 路由组支持 catch-all 路由吗A:支持app/ ├── (docs)/ │ └── [...slug]/ │ └── page.js # 匹配 /docs/a/b/c 等Q: 如何在不同组之间共享布局A:使用根布局或在组外定义共享组件// app/layout.js - 根布局共享给所有组exportdefaultfunctionRootLayout({children}){return(html langzhbody classNameglobal-styles{children}/body/html);} 感谢阅读想了解更多我的博客网站 | 记录思考分享干货我的个人主页 | 关于我、开源项目

Next.js 路由组：优雅的组织代码

相关推荐

从Transformer到AI-Native OS：OpenClaw项目与AI操作系统部署实战

Next.js 平行路由：构建模块化动态布局

揭秘OpenClaw两大高阶Skills：session_manager与workflow_orchestrator实战指南

更多资讯

GMP静态库编译与中文文档整理实战指南

工业级电源路径智能管理：TPS259483与PIC18F67K40协同设计

Neo4j社区版Windows解压包实战：从启动到中文环境避坑指南

基于TPS259483与STM32L041C6的电源路径保护方案设计

Segment Routing原理与实践：无状态转发如何提升网络确定性

OpenShell：一套配置统一跨平台Shell工作流

今日更新

学生选课系统DFD图绘制指南：边界划分与分层校验实战

JIRA敏捷落地：Scrum角色权限、Sprint与燃尽图避坑指南

SEMI S8人机工程验收实战：从条款拆解到现场实测的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？