nextjs top bar

使用说明：

1, install

npm install next-nprogress-bar

2, Create a provider file:

'use client';
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
type Props = { children?: React.ReactNode; };

const ProgressProvider = ({ children }: Props) => {
    return (
        <>
            {children}
            <ProgressBar
                height="4px"
                color="#00bfff"
                options={{ showSpinner: true }}
                shallowRouting
            />
        </>
    );
};

export default ProgressProvider;

3, Then wrap elements in your root layout.tsx with ProgressProvider;

import ProgressProvider from '@/providers/ProgressProvider';
export default function RootLayout({children,}: {
children: React.ReactNode;
}) {
return (
 <html lang="en">
   <body>
    <ProgressProvider>{children}</ProgressProvider >
   </body>
</html>
);}

nextjs top bar a year ago