Why?
In the realm of Next.js, change is the only constant. Our team recently answered the call to evolution, choosing to upgrade from the old pages router to the forward-thinking app router.
The primary motivation was to support React Server Components (RSC), with the added benefit of keeping the system updated.
While the new format presents some appealing features, it also comes with certain limitations. I would like to present some of the considerations and insights from that transition.
Good
Fetch API: The Fetch API integration in the App Router was seamless and efficient, simplifying data fetching and handling within our application. Its robust capabilities and straightforward usage were a welcome improvement over previous methods.
Layouts: The introduction of layouts in the App Router provided a powerful way to structure our application. This feature allowed for more organised and reusable layout components, significantly improving the maintainability and scalability of our codebase.
Removed next/head: The removal of next/head was a minor but noteworthy change, that streamlined the handling of head elements. This change reduced boilerplate code and made head management more intuitive within the new routing framework. Instead of using HTML elements like <head>, you can simply use Metadata APIs.
Project Organization: Some new features enable colocation of files and new way of organising them. For example, one can define private folders by using underscore prefixing, or group some sets of URLs without affecting the path, by using parenthesis. On the other hand, some might argue that this approach could lead to confusion and clutter in the codebase.
"Change is the essence of life. Be willing to surrender what you are for what you could become." - Unknown
Bad
Migration Efforts, Stopped in the Middle: The migration process required considerable effort and was halted midway due to unforeseen complications. This disruption affected our development timeline and required us to allocate additional resources to resolve the issues. So in fact, our transition to app router is ongoing, as we currently operate using both routing methods concurrently.
CSS Support: During the migration, we encountered significant challenges with CSS support, particularly with scoped styles and global styles. The existing CSS setup required substantial reworking to fit the new router’s structure, leading to frustration and delays.
Confusing Notation of use client and use server: The introduction of the use client and use server directives added a layer of confusion to the migration process. Differentiating between client-side and server-side code became more cumbersome, increasing the likelihood of errors and misconfigurations.
Next.js 13 Use Server Components by Default: The default use of Server Components in Next.js 13 was both a blessing and a curse. While it aimed to enhance performance, it introduced unexpected behavior in our application, necessitating significant code refactoring and adaptation.
Top comments (0)