innei

关注 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。

简单列举一下问题：

1. parallel route 作为 slot 会丢失 context 上下文的值，导致获取到 undefined，只会在 dev 的热重载会出现，prod 不受影响。这个问题可能是我用法有点诡异。

2. parallel route 作为 slot 在 router 跳转到子页面后再刷新，或刚开始直接到子页面会出现 NEXT_NOT_FOUND。我真的打脸，前脚刚吹完 Next.js parallel routes 的 slot 牛逼，后脚直接 bug 轰炸，连夜把两天架的代码全删了。

   1. https://github.com/vercel/next.js/issues/49569
   2. https://twitter.com/__oQuery/status/1656170967624826880?s=20

3. App Router 没有 shallow navigation 的概念了，文档说在同一组 route 下，layout 是公用的。在同一个动态路由下，layout 是相同的，应该是不会刷新的才会，但是实际用上去，在同一个动态路由中跳转，layout 整个卸载了然后又挂载了，导致我数据直接没了。我淦。

   1. https://github.com/vercel/next.js/issues/49553

4. generateMetadata 没法用，嵌套路由中，从一个 layout 调到另一个 layout 有概率不刷新，卡在某个路由的 generateMetadata 不动了，除非刷新页面。目前这个最小重现没造出来，可能是我触碰了某些边缘 case。现在在 [https://github.com/Innei/kami-php] 通过以下路径能复现（其他路径也有）：

   1. 访问 https://kami-php.vercel.app/posts/programming/tailwind-built-in-colors-dark-mode，此时 title 是 让 Tailwind 内置颜色支持暗黑模式
   2. 点击头部导航的 文 进入文章列表。此时是 博文 -
   3. 点击头部导航的 源 回到首页。此时是 博文 -，就卡在这个 title 了。
   4. 之后不管去到哪，都会是 博文 -，除非重载页面。

总结：

• WindiCSS 迁到 TailwindCSS 眼睛疼
• 迁到 App Router 很来气
• Framer Motion 真好用，动态太赞了
• 建议原地跑路到 Nuxt
• 休息的这几天，比上班还累。

此文由 Mix Space 同步更新至 xLog
原始链接为 https://innei.ren/posts/programming/next-app-router-migration-what-is-new-php