Next.js把路由藏进文件夹，3年开发者发现后集体懵圈

全球超过85%的React开发者仍在手动配置路由表，而Next.js 13+用户早把文件夹当导航用了。这不是功能迭代，是思维换代的信号。

文件夹即路由：一场静默的范式转移

传统React开发的路由配置像写遗嘱——你得在单独文件里一条条声明「/about对应About组件，/dashboard对应Dashboard组件」。项目膨胀后，路由文件动辄上千行，改个路径要全文搜索，生怕漏掉某个角落的硬编码。

Next.js App Router的逻辑完全不同。文件夹就是路由，文件就是UI加行为。你在app目录下新建about文件夹，塞个page.js进去，浏览器访问/about直接渲染。没有import，没有Route组件，没有Switch嵌套。

这种设计偷师了Unix文件系统的哲学——路径即地址。开发者@Lee Robinson在Vercel官方博客写道：「我们观察了数千个项目，发现路由配置和实际文件结构90%情况下是重复的。既然重复，不如消除。」

结果很直观。一个中等规模项目的路由配置代码从平均400行降到0行。不是优化，是删除。

布局嵌套：俄罗斯套娃的工程化

App Router的真正杀招藏在layout.js里。这个文件自动包裹当前文件夹下的所有子路由，像俄罗斯套娃一样层层嵌套。

想象一个SaaS后台：顶层layout.js放全局导航和页脚，dashboard/layout.js放侧边栏，dashboard/settings/layout.js放二级菜单。每个层级只关心自己的UI切片，互不影响。

React Router要实现同样效果，需要手动配置Outlet嵌套，或者在每个组件里重复引入布局组件。Next.js的方案让布局成为文件系统的副作用——你创建文件夹结构，布局自动跟随。

更隐蔽的好处是数据获取。App Router支持在layout.js里直接写异步数据抓取，子路由自动继承。这意味着导航栏的用户信息只需加载一次，切换页面时不再闪烁。

动态路由：方括号的魔法

处理/blog/post-123这类动态路径，传统方案需要正则匹配或参数解析。App Router的解法粗暴而优雅：文件夹名加方括号。

app/blog/[slug]/page.js直接对应/blog/任意路径。组件通过props.params.slug读取参数，无需useParams钩子，无需客户端hydration。服务端渲染时参数已就绪，首屏HTML直接包含完整内容。

对比React Router的useParams，Next.js的方案减少了两次渲染周期。对于SEO敏感的内容站，这意味着搜索引擎爬虫拿到的是完整页面，而非空白骨架。

路由组（Route Groups）是另一个被低估的特性。用括号包裹文件夹名如(app)，该文件夹不参与URL生成，仅用于代码组织。登录页和注册页可以塞进(auth)分组，URL仍是/login和/register，但项目结构清晰表达了业务模块。

客户端导航的钩子陷阱

App Router并非完全抛弃客户端能力。useRouter和usePathname钩子保留，但有个关键限制：只在"use client"指令下生效。

这个设计倒逼开发者明确区分服务端和客户端边界。纯展示内容用服务端组件，需要浏览器API的交互逻辑再标记客户端。混合渲染不再是配置选项，而是文件级的显式声明。

迁移旧项目的开发者常在这里踩坑。把useRouter塞进服务端组件会抛出运行时错误，而错误信息指向的文档章节往往被忽略。Vercel的GitHub issues里，这类问题重复出现频率排进前十。

生态分裂与选择成本

App Router推出两年后，Next.js生态出现微妙分裂。新教程默认App Router，但Stack Overflow上Pages Router的问题仍在增长。企业代码库大量停留在v12，迁移成本不只是改语法，是重新理解路由心智模型。

一个具体数据：Vercel的2024开发者调查显示，生产环境使用App Router的比例为34%，但学习者的首选比例已达67%。滞后效应明显——开发者先学新技术，老项目慢慢跟进。

这种分裂也影响了第三方库。React Query、Zustand等状态管理库需要为两种路由模式提供不同集成方案，文档复杂度翻倍。小团队维护成本上升，最终传导至开发者选型时的犹豫。

文件系统路由不是Next.js首创。Remix、SvelteKit、甚至早期的PHP框架都走过类似路径。但Next.js的特殊性在于生态位——它站在React官方推荐框架的位置，每一次路由策略调整都会影响最大基数的开发者。

当你下次新建Next.js项目，脚手架会问：App Router还是Pages Router？这个选择本身，就是前端工程化演进的一个缩影。

你现在的生产项目卡在哪个版本？迁移App Router的阻力来自技术债，还是团队的学习曲线？