I have developed a large web application with NextJS 13, the first version was using the Pages Router.
After completing almost the entire website, I managed to migrate to the App Directory.
This migration was not essentially to upgrade for some new routing features, but I wanted to change my SASS's Large compiled file imported in the _app.tsx for better website loading time.
Since the loading was quite a big issue for this project, I started using MUI with the styling of the each component, simply a CSS-in-JS solution.
But the problem I found with the new App Directory, is the router events, I had a progress bar indicator from the next-n-progress package, but now it doesn't work, the user clicks on a link and the app takes some small time to load the next page.
The problem is not an issue for SSR pages since I have put a loading.tsx file in the root of each page, but it persists for pages with client-side configuration.
Like the Home Page, Sign-in & Sign-up, etc.
I tried another package for the Progress Bar that supports the new app directory, but it is not showing up at all.
This is the component responsible for the Layout: GitHub Component permalink
Is there any way to create a new progress bar with this new NextJS 13 Update?
I found that it is a common issue with the new Next.js 13 App Directory, and there are some open issues about it, including multiple problems encountered in the App Router Behaviors.
So, I managed to use next-n-progress, but I noticed that it only works by USING LINK COMPONENT, since it triggers the loading for the progress bar to appear, plus it has a benefit of prefetching all Links present on the view-port.
So, meanwhile, just keep using Link instead of Router.push for simple navigation cases.