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.

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

use with next js 13 #247

Open
amirht-dev opened this issue Jun 11, 2023 · 9 comments
Open

use with next js 13 #247

amirht-dev opened this issue Jun 11, 2023 · 9 comments

Comments

@amirht-dev
Copy link

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

@Darpan-favfly
Copy link

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

@nnmax
Copy link

nnmax commented Jul 1, 2023

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
Copy link

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

@wottpal
Copy link

wottpal commented Jul 8, 2023

@Darpan-favfly Have a look into this: apal21/nextjs-progressbar#86 (comment)

@muhaimincs
Copy link

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

@in-ch
Copy link

in-ch commented Oct 26, 2023

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
Copy link

muhaimincs commented Oct 26, 2023 via email

@in-ch
Copy link

in-ch commented Oct 26, 2023

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
Copy link

tomcru commented Dec 13, 2023

Holy Loader will work well for you 👋

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants