[DX-trace] next.js app router vs. @tanstack/router

Develop Experience Trace

最近上手了 @tanstack/router 之后，一发而不可收拾，感觉其提供的开发体验非常棒。但在部署的时候，发现 @tanstack/start 还在 comming soon, 又切换回 Next.js 开发一个单页面。
使用其中一个的时候，总想着另一个框架好用的特性。记录两点，期望再次遇到的时候，不纠结，直接为场景用到最适配的方案。

使用 tanstack/router 的时候，想的 Next.js 的好

parellel route，文档中提到了，但对应的内容是 TODO。
同样，对于弹层管理，使用 tanstack 的 route mask + outlet 能够较为清晰的划分职能，但是，携带者页面上下文的情况（进入了子路由），再通过 子路由切换 mask 内容，在一个路由上无法承载了。所以要划分清基于路由的 mask 可使用场景的边界。
这，让我原本设想的，一套路由打极大纵深的情况收敛了。
所以，还是可以设想一些应用场景。做出来交互，使用的。

使用 Next.js 的时候，想 tanstack/router 的好

route 参数的 type-safe:

当前已有的路由的提示

当前路径路由的 params

自动标准化路由中 search 参数

只这一条，开发体验太重要了，为了处理路由入口页面 initial 过程中的参数，胶水代码很多。之前在公司项目中，为处理 search params 写了较多的前置处理逻辑。现在感觉太零散了，而 tanstack/router 的方案就足够整体。原本认可 Next.js， 是因为它足够原生，基本上直接使用浏览器原生的 API，当然，还有将此特色推行到极致的 remix。但这种特色下，开发体验太不顺畅了，很多方式逻辑都要调整。这样失去了在专门场景下，可以简化的空间。

好想把 tanstack router 的这一套路由 type-safe 逻辑，搞到 next.js 中。或者，作为抽象出通用的 type-safe 方案参考案例。

接下来，试一试 tanstack router + vinxi 的元框架的部署