我已经很久关注 Next.js 的Layouts RFC，当时这个 RSC 出来的时候，我还感到很兴奋，我想着这个特征的出现应该就能解决首屏加载初始数据的问题，比起现在的各种 HACK 方法应该会优雅很多。
不曾想到的是 Next.js 13 把 Layout 和 Server Component 等全部捆绑到一起了，整个架构都进行了重写，迁移过程非常困难，而且你想用新特征还必须从底层路由开始迁移。这相当于把这个应用重写一遍了。
写下这篇文章的时候，Next Conf 刚刚结束，Layouts 初版跟随 13.0.0 到现在刚发布的 13.4.0 经历了 6 个月的公测，终于官方推出 stable 版本。现在更名为 App Router，原来的架构成为 Page Router。两者完全不兼容，比 Vue 2 到 Vue 3 都不友好。
蠢蠢欲试。想借此机会梳理一下 Kami 的代码结构。并且：
- 动作库迁移到 Framer Motion
- WindiCSS 迁移到 TailwindCSS
在之前，也帮助了 xLog 完成一部分的 App Router 的迁移。
到现在已经花费了一周的时间，才迁移了三个页面。不仅心累，效果还不好，甚至不如原本的 Page Router。
关于一些问题，大多都在蓝鸟上吐槽过了。总之这几天睡也睡不好，写也写不动，6 个月的公测，直到 stable 的放出，稳定性已久感人。从 Next.js 12 开始，我对它的信心已经死了，从一个 patch 版本带来的一堆 breaking change，build crash 都是常事了。一天天的画大饼，真正出来的特征用起来又是屎一样。赶紧连夜跑路 Nuxt。
简单列举一下问题：
-
parallel route 作为 slot 会丢失 context 上下文的值，导致获取到 undefined，只会在 dev 的热重载会出现，prod 不受影响。这个问题可能是我用法有点诡异。
-
parallel route 作为 slot 在 router 跳转到子页面后再刷新，或刚开始直接到子页面会出现 NEXT_NOT_FOUND。我真的打脸，前脚刚吹完 Next.js parallel routes 的 slot 牛逼，后脚直接 bug 轰炸，连夜把两天架的代码全删了。
-
App Router 没有 shallow navigation 的概念了，文档说在同一组 route 下，layout 是公用的。在同一个动态路由下，layout 是相同的，应该是不会刷新的才会，但是实际用上去，在同一个动态路由中跳转，layout 整个卸载了然后又挂载了，导致我数据直接没了。我淦。
-
generateMetadata 没法用，嵌套路由中，从一个 layout 调到另一个 layout 有概率不刷新，卡在某个路由的 generateMetadata 不动了，除非刷新页面。目前这个最小重现没造出来，可能是我触碰了某些边缘 case。现在在 [https://github.com/Innei/kami-php] 通过以下路径能复现（其他路径也有）：
- 访问https://kami-php.vercel.app/posts/programming/tailwind-built-in-colors-dark-mode，此时 title 是
让Tailwind内置颜色支持暗黑模式 - 点击头部导航的
文进入文章列表。此时是博文 - - 点击头部导航的
源回到首页。此时是博文 -，就卡在这个 title 了。 - 之后不管去到哪，都会是
博文 -，除非重载页面。
- 访问https://kami-php.vercel.app/posts/programming/tailwind-built-in-colors-dark-mode，此时 title 是
总结：
- WindiCSS 迁到 TailwindCSS 眼睛疼
- 迁到 App Router 很来气
- Framer Motion 真好用，动态太赞了
- 建议原地跑路到 Nuxt
- 休息的这几天，比上班还累。
此文由Mix Space同步更新至 xLog
原始链接为https://innei.ren/posts/programming/next-app-router-migration-what-is-new-php