I have developed a large web application with NextJS 13, the first version was using the Pages Router.
After pleting 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 piled 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 ponent, 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 ponent responsible for the Layout: GitHub Component permalink
Is there any way to create a new progress bar with this new NextJS 13 Update?
I have developed a large web application with NextJS 13, the first version was using the Pages Router.
After pleting 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 piled 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 ponent, 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 ponent responsible for the Layout: GitHub Component permalink
Is there any way to create a new progress bar with this new NextJS 13 Update?
Share Improve this question edited Jun 4, 2023 at 13:00 Yassine Chettouch asked May 25, 2023 at 12:46 Yassine ChettouchYassine Chettouch 4084 silver badges19 bronze badges 1- Maybe relevant: stackoverflow./questions/75311417/… – Andy Commented May 25, 2023 at 12:55
3 Answers
Reset to default 1UPDATE
I found that it is a mon 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.
Use Next JS Top loader. It will work with server side ponent in next js 14 https://www.npmjs./package/nextjs-toploader
using npm:
npm install nextjs-toploader
Usage with app/layout.js for app folder structure
import NextTopLoader from 'nextjs-toploader';
export default function RootLayout({ children }) { return (
<html lang="en">
<body>
<NextTopLoader />
{children}
</body>
</html> ); }
I found this library that have lot of features, also support typescript: Next NProgress bar
Link: https://www.npmjs./package/next-nprogress-bar
import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar';
export default function App({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<ProgressBar
height="4px"
color="#fffd00"
options={{ showSpinner: false }}
shallowRouting
/>
</>
);
}