Original link: https://innei.ren/posts/programming/next-app-router-migration-what-is-new-php
This rendering is generated by marked, and there may be typographical problems. For the best experience, please go to: https://innei.ren/posts/programming/next-app-router-migration-what-is-new-php
I have been paying attention to the Layouts RFC of Next.js for a long time. When this RSC came out, I was still very excited. I thought that the appearance of this feature should be able to solve the problem of initial data loading on the first screen. Compared with the current various HACK methods Should be much more elegant.
Unexpectedly, Next.js 13 bundles Layout and Server Component together, and the entire architecture has been rewritten. The migration process is very difficult, and if you want to use new features, you must start migrating from the underlying routing. This is equivalent to rewriting the application.
When writing this article, Next Conf has just ended. The first version of Layouts followed 13.0.0 to the newly released 13.4.0 after 6 months of public testing, and finally officially released the stable version. It is now renamed App Router, and the original architecture becomes Page Router. The two are completely incompatible and less friendly than Vue 2 to Vue 3.
Ready to try. I would like to take this opportunity to sort out Kami’s code structure. and:
- Motion library migrated to Framer Motion
- WindiCSS migrated to TailwindCSS
Before that, he also helped xLog complete part of the App Router migration.
It has taken a week now and only three pages have been migrated. Not only is it tiring, but the effect is not good, even worse than the original Page Router.
Regarding some issues, most of them have complained on the blue bird. In short, I can’t sleep well these days, and I can’t write well. After 6 months of public beta, until the release of stable, the stability has been moving for a long time. Starting from Next.js 12, my confidence in it is dead. A bunch of breaking changes and build crashes from a patch version are common. Drawing big cakes day by day, the real features are like shit when used. Hurry up and run Nuxt overnight.
Just to list the questions:
-
Parallel route as a slot will lose the value of the context context, resulting in undefined, which will only appear in the hot reload of dev, and prod will not be affected. The problem may be that my usage is a bit weird.
-
The parallel route is used as a slot to refresh after the router jumps to the subpage, or NEXT_NOT_FOUND will appear directly to the subpage at the beginning. I was really slapped in the face. I just finished blowing the slot of Next.js parallel routes. The back foot was directly bug-bombed, and I deleted all the codes of the two days overnight.
-
App Router does not have the concept of shallow navigation. The document says that under the same group of routes, the layout is common. Under the same dynamic route, the layout is the same, it should not be refreshed, but in actual use, jumping in the same dynamic route, the layout is uninstalled and then mounted again, resulting in my data being directly lost up. I am.
-
generateMetadata can’t be used. In nested routes, there is a probability that it will not be refreshed when transferred from one layout to another. The generateMetadata stuck in a certain route will not move unless the page is refreshed. Currently this minimal rendition is not built, maybe I touched some edge cases. Now [ https://github.com/Innei/kami-php] can be reproduced through the following path (other paths are also available):
- Visit https://kami-php.vercel.app/posts/programming/tailwind-built-in-colors-dark-mode, at this time the title is
让Tailwind 内置颜色支持暗黑模式 - Click on
文in the header navigation to enter the article list. At this point博文- - Click on
源of the header navigation to return to the home page. This is博文-, so I’m stuck at this title. - No matter where you go after that, it will be
博文-unless the page is reloaded.
- Visit https://kami-php.vercel.app/posts/programming/tailwind-built-in-colors-dark-mode, at this time the title is
Summarize:
- WindiCSS migrated to TailwindCSS eye pain
- Very angry about moving to App Router
- Framer Motion is really easy to use, the dynamics are amazing
- It is recommended to run to Nuxt in place
- These few days of rest are more tiring than going to work.
finish watching? say something
This article is transferred from: https://innei.ren/posts/programming/next-app-router-migration-what-is-new-php
This site is only for collection, and the copyright belongs to the original author.