use with next js 13 #247
Comments
|
I am facing the same issue please let me know if any solution available |
|
The following code works well in NextJs 13 Pages Router: // src/components/ProgressBar.tsx
import 'nprogress/nprogress.css'
import { useEffect } from 'react'
import NProgress from 'nprogress'
import { useRouter } from 'next/router'
export default function ProgressBar() {
const router = useRouter()
useEffect(() => {
const handleStart = () => NProgress.start()
const handleStop = () => NProgress.done()
router.events.on('routeChangeStart', handleStart)
router.events.on('routeChangeComplete', handleStop)
router.events.on('routeChangeError', handleStop)
return () => {
router.events.off('routeChangeStart', handleStart)
router.events.off('routeChangeComplete', handleStop)
router.events.off('routeChangeError', handleStop)
}
}, [router.events])
return (
<style>
{`
#nprogress .bar {
height: 4px;
}
`}
</style>
)
}// src/pages/_app.tsx
import type { AppProps } from 'next/app'
import ProgressBar from '../components/ProgressBar'
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<ProgressBar />
<Component {...pageProps} />
</>
)
} |
|
this is old method in page router, I am asking for app router for next js v13.4 |
|
@Darpan-favfly Have a look into this: apal21/nextjs-progressbar#86 (comment) |
|
have a look at this one too: https://github.com/joulev/nextjs13-appdir-router-events |
|
Here are my sample code import React from 'react';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental';
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
function Providers({ children }: React.PropsWithChildren) {
const [client] = React.useState(new QueryClient());
return (
<QueryClientProvider client={client}>
<ReactQueryStreamedHydration>
{children}
<ProgressBar height="4px" color="#FF5500" shallowRouting />
</ReactQueryStreamedHydration>
<ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
</QueryClientProvider>
);
}
export default Providers;and apply to the export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
<div id="modal-root" />
</body>
</html>
);
} |
|
Will you mind to prove this in code sandbox
…On 26 Oct 2023 at 8:37 AM +0800, in-ch ***@***.***>, wrote:
Here are my sample code
import React from 'react';
import { QueryClientProvider, QueryClient } from ***@***.***/react-query';
import { ReactQueryDevtools } from ***@***.***/react-query-devtools';
import { ReactQueryStreamedHydration } from ***@***.***/react-query-next-experimental';
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
function Providers({ children }: React.PropsWithChildren) {
const [client] = React.useState(new QueryClient());
return (
<QueryClientProvider client={client}>
<ReactQueryStreamedHydration>
{children}
<ProgressBar height="4px" color="#FF5500" shallowRouting />
</ReactQueryStreamedHydration>
<ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
</QueryClientProvider>
);
}
export default Providers;
and And apply to the layout.tsx file as follows.
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
<div id="modal-root" />
</body>
</html>
);
}
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you commented.Message ID: ***@***.***>
|
@muhaimincs Here is the example |
|
Holy Loader will work well for you 👋 |
next js 13 doesn't support router event. has anyone been able to use nprogress with next 13
The text was updated successfully, but these errors were encountered: