👋 Hi everyone!

I'm currently working on a Next.js project. I started with a simple 'create-next-app' boilerplate and have selected "app router" as my default architecture. Alongside this, I've also implemented custom routes using the Pages router (including _app.tsx and an "about" page).

With the App Router: When I make changes to a page and save, hot reloading works just fine. It updates seamlessly, which is great.

With the Pages Router: However, whenever I make changes to a page under the Pages router and save, instead of hot reloading, the entire page refreshes. This is not the behavior I was expecting and it's slowing down my workflow.

I've attached a recording to show each case.

I'm curious to know if anyone else has faced this issue or if it's a known limitation/bug with Next.js when using both routing methods. I'm looking for insights or solutions to enable hot reloading for the Pages router without affecting the current functionality of the App router.

Any advice, suggestions, or shared experiences would be hugely appreciated! I'm sure there's a workaround or a specific setup that I might be missing.

Thanks in advance for your help! 🙏

Some additional info on my environment:

- Operating System: macOS (M1)
- Browser: Firefox
- Node.js Version: 20.9.0
- NextJS version 14.0.4