admin管理员组

文章数量:1377716

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?

  • javascript
  • reactjs
  • typescript
  • next.js
  • material-ui
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
Add a ment  | 

3 Answers 3

Reset to default 1

UPDATE

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
      />
    </>
  );
}

本文标签： javascriptHow to create a Loading Indicator or a Progress Bar in NextJS39s App DirectoryStack Overflow

版权声明：本文标题：javascript - How to create a Loading Indicator or a Progress Bar in NextJS&#39;s App Directory? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744407688a2604788.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。