I have been following the Layouts RFC of Next.js for a long time. At that time, when this RFC came out, I was very excited. I thought that the appearance of this feature should be able to solve the problem of loading initial data on the first screen, and it should be much more elegant than various HACK methods used now.
I didn't expect that Next.js 13 bundled Layout and Server Component together and completely rewrote the entire architecture. The migration process was very difficult, and if you want to use the new feature, you must start the migration from the underlying router. This is equivalent to rewriting the entire application.
When I wrote this article, Next Conf had just ended. The initial version of Layouts followed 13.0.0 and was just released in 13.4.0 after 6 months of public testing. It finally became an official stable version. It is now renamed as App Router, and the original architecture becomes Page Router. The two are completely incompatible, even more unfriendly than Vue 2 to Vue 3.
I am eager to try it out. I want to take this opportunity to organize Kami's code structure. And:
- Migrate the action library to Framer Motion
- Migrate WindiCSS to TailwindCSS
Before that, I also helped xLog complete part of the migration of App Router.
It has been a week now, and only three pages have been migrated. Not only am I mentally exhausted, but the effect is not good, and it is even worse than the original Page Router.
Most of the problems have been complained about on Bluebird. In short, I have not been able to sleep well these days, and I can't write anymore. After 6 months of public testing, until the stable version was released, the stability has been long overdue. Since Next.js 12, my confidence in it has died. Breaking changes caused by a patch version and build crashes have become common occurrences. Day after day, I make big promises, but the actual features that come out are like shit. I quickly ran away from Nuxt overnight.
Here are some of the problems:
-
The parallel route as a slot loses the value of the context, resulting in undefined. This only occurs in dev hot reload and does not affect prod. This problem may be due to my usage being a bit strange.
-
The parallel route as a slot will encounter NEXT_NOT_FOUND when the router jumps to the child page and then refreshes, or when it goes directly to the child page at the beginning. I really slapped myself in the face. I just praised the coolness of Next.js parallel routes, but then I encountered a barrage of bugs. I deleted all the code I wrote in two days overnight.
-
App Router no longer has the concept of shallow navigation. The documentation says that within the same group of routes, the layout is shared. In the same dynamic route, the layout is the same and should not be refreshed. However, in actual use, when navigating within the same dynamic route, the layout is completely unmounted and then mounted again, causing my data to be lost. Damn it.
-
generateMetadata cannot be used. In nested routes, when transitioning from one layout to another, there is a chance that it will not refresh and get stuck at the generateMetadata of a certain route, unless the page is refreshed. I haven't been able to reproduce this minimum example yet, it may be that I have encountered some edge cases. Currently, it can be reproduced at [https://github.com/Innei/kami-php] through the following steps (other paths also have this issue):
- Visit https://kami-php.vercel.app/posts/programming/tailwind-built-in-colors-dark-mode, at this time the title is
让 Tailwind 内置颜色支持暗黑模式(Make Tailwind built-in colors support dark mode) - Click on
文in the header navigation to enter the article list. At this time, it is博文 -(Posts -) - Click on
源in the header navigation to return to the homepage. At this time, it is still博文 -, and it gets stuck at this title. - After that, no matter where you go, it will always be
博文 -, unless you reload the page.
- Visit https://kami-php.vercel.app/posts/programming/tailwind-built-in-colors-dark-mode, at this time the title is
Summary:
- Migrating from WindiCSS to TailwindCSS is painful for the eyes.
- Migrating to App Router is frustrating.
- Framer Motion is really good, the animations are amazing.
- I suggest running away to Nuxt.
- These few days of rest are more tiring than work.
This article is synchronized and updated to xLog by Mix Space.
The original link is https://innei.ren/posts/programming/next-app-router-migration-what-is-new-php