use with next js 13 - Githubissues

amirht-dev commented 1 year ago

next js 13 doesn't support router event. has anyone been able to use nprogress with next 13

Darpan-favfly commented 1 year ago

I am facing the same issue please let me know if any solution available

nnmax commented 1 year ago

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

Darpan-favfly commented 1 year ago

this is old method in page router, I am asking for app router for next js v13.4

wottpal commented 12 months ago

@Darpan-favfly Have a look into this: https://github.com/apal21/nextjs-progressbar/issues/86#issuecomment-1447977706

muhaimincs commented 11 months ago

have a look at this one too: https://github.com/joulev/nextjs13-appdir-router-events

in-ch commented 8 months ago

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

muhaimincs commented 8 months ago

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 (
{children}
); }

export default Providers; and And apply to the layout.tsx file as follows. export default function RootLayout({ children }: { children: ReactNode }) { return (
{children}

); } — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

in-ch commented 8 months ago

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 ( {children} ); } export default Providers; and And apply to the layout.tsx file as follows. export default function RootLayout({ children }: { children: ReactNode }) { return ( {children}
); } — 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

CodeSandbox Link

tomcru commented 6 months ago

Holy Loader will work well for you 👋

rstacruz / nprogress

use with next js 13 #247