Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NProgressBar not working in my NextJs 14.2.4 #69

Closed
acatzk opened this issue Jul 8, 2024 · 6 comments
Closed

NProgressBar not working in my NextJs 14.2.4 #69

acatzk opened this issue Jul 8, 2024 · 6 comments

Comments

@acatzk
Copy link

acatzk commented Jul 8, 2024

No description provided.

@JWPapi
Copy link

JWPapi commented Jul 9, 2024

For me neither.

@acatzk
Copy link
Author

acatzk commented Jul 10, 2024

@Skyleen77 I want you to test in next.js 14.2.4 app directory if will works on your end

@Skyleen77
Copy link
Owner

@Skyleen77 I want you to test in next.js 14.2.4 app directory if will works on your end

@acatzk For me it works perfectly.
How did you set up your Progress Bar?

@acatzk
Copy link
Author

acatzk commented Jul 14, 2024

@Skyleen77 I want you to test in next.js 14.2.4 app directory if will works on your end

@acatzk For me it works perfectly. How did you set up your Progress Bar?

  • Install next.js 14.2.4
  • Install shadcn-ui
  • Install package npm install next-nprogress-bar

create file
ProgressBarProvider.jsx

'use client';

import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';

const Providers = ({ children }) => {
  return (
    <>
      {children}
      <ProgressBar
        height="4px"
        color="#fffd00"
        options={{ showSpinner: false }}
        shallowRouting
      />
    </>
  );
};

export default Providers;

/app/layout.jsx
// Import and use it in /app/layout.jsx
import Providers from './providers';

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

go to global.css

#nprogress .bar {
  z-index: 99999 !important;
}

@Skyleen77
Copy link
Owner

For my part this works, and z-index 9999 was added by default in the latest version.

You say create a file ProgressBarProvider.jsx and you import another file in the layout import Providers from './providers';. Is this normal?

@acatzk
Copy link
Author

acatzk commented Jul 27, 2024

@Skyleen77
I see the problem now, it is because I used the router.push instead of Link component

@acatzk acatzk closed this as completed Jul 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@JWPapi @acatzk @Skyleen77