NProgressBar not working in my NextJs 14.2.4
acatzk opened this issue · comments
For me neither.
@Skyleen77 I want you to test in next.js 14.2.4 app directory if will works on your end
@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?
@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;
}
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?
@Skyleen77
I see the problem now, it is because I used the router.push instead of Link component