What are my thoughts on next.js app router vs pages router

TL;DR

The speaker shares thoughts on Next.js App Router's benefits and drawbacks compared to Pages Router.

Transcript

okay so this will be a really quick talking video I just want to talk about the app router I have been playing around with the app router on a side project that uses Super Bass and I want to kind of give my initial thoughts on the app router now that it's like unstable because I have some opinions on it um for the most part prior to the app router ... Read More

Key Insights

• 📁 The switch to the App Router introduces several file naming repetitions, complicating the developer's workflow and file navigation.
• 👤 The default server-side rendering feature is a significant advantage in improving user interfaces, especially in providing coherent navigation without flickering.
• 👨‍💻 The ease of writing async functions directly within page components enhances coding efficiency and reduces redundancy in code architecture with the App Router.
• 🏪 Despite favorable aspects, the speaker misses the quick access to query parameters from request objects, indicating a tradeoff in convenience for consistency with frontend practices.
• 🌚 The speaker acknowledges a need for improved documentation clarity between the Pages and App Router, highlighting potential challenges developers face while adapting to new frameworks.
• 🔇 Integration with existing tools such as TRPC remains uncertain, as the speaker awaits clearer implementations and stability in the App Router's features before fully transitioning.
• 🔇 The speaker encourages discussions in the developer community to assess diverse opinions on the App Router against the Pages Router to foster better understanding and practices.

Questions & Answers

Q: What are the main frustrations with the App Router compared to the Pages Router?

The speaker expresses frustration primarily with the file naming conventions in the App Router, particularly the use of repetitive names like page.tsx for multiple files. This makes it challenging to differentiate between pages while navigating through code. They found that the previous Pages Router provided clearer readability and easier access when searching for specific files, which adds to their annoyance with the new setup.

Q: What advantages does the App Router offer regarding server-side rendering?

The App Router's default server-side rendering capability is highlighted as a significant improvement over the Pages Router. This allows for better initial rendering of pages, prevents flickering of UI elements like navigation bars, and facilitates dynamic metadata handling. The speaker appreciates that server-side rendering can enhance user experience by ensuring immediate availability of the correct data upon page load.

Q: How does the speaker feel about the API changes when transitioning to the App Router?

While the speaker recognizes that the App Router simplifies the export process for API functions by removing the need for complex request and response handling, they do miss some conveniences of the previous structure. Specifically, they find that the new method requires additional boilerplate code, particularly for extracting URL parameters, which can complicate the development process slightly compared to the more straightforward conventions used before.

Q: Why is the speaker hesitant about adopting the App Router for existing projects?

The speaker cites concerns about using features labeled as alpha, as they fear potential modifications or deprecations might lead to additional refactoring in the future. They prefer to work with stable releases to avoid the complications and inefficiencies that can arise from refactoring code later. Thus, they have opted to maintain their existing projects using the Pages Router until confident in the stability of the App Router.

Summary & Key Takeaways

• The content discusses the speaker's experiences with the new App Router in Next.js, highlighting frustrations with file naming conventions that can make navigation cumbersome.

• The App Router’s server-side rendering by default is praised for its efficiency and reducing flicker issues in user interfaces, improving overall user experience.

• While the speaker acknowledges several advantages of the App Router, they remain cautious about its alpha features and the potential obsolescence of TRPC in upcoming updates.