Compatibility with useRouter

[PixeledCode]

Great Library. Thanks for your work.
So far it works great for Link components but for useRouter, it doesn't seem to work at all. Is there some workaround it?

Edit: After going through multiple comments here, I have settled on this approach https://github.com/CivicDataLab/opub-mono/blob/main/apps/www/lib/navigation.tsx

• I can start and stop the progress bar on demand.
• Also using zustand to keep a meta state globally for when page transitioning is happening

[Aspedm]

+1, it will be great. But I think it's impossible now, with current app dir api. I'll be glad if I'm wrong.

[zbeyens]

Here is my workaround:

export const usePRouter = () => {
  const router = useRouter();

  const { push } = router;

  router.push = (href, options) => {
    NProgress.start();
    push(href, options);
  };

  return router;
};

// add this to a top level component
const pathname = usePathname();
const searchParams = useSearchParams();

useEffect(() => {
  NProgress.done();
}, [pathname, searchParams]);

[PixeledCode]

Here is my workaround:

export const usePRouter = () => {
  const router = useRouter();

  const { push } = router;

  router.push = (href, options) => {
    NProgress.start();
    push(href, options);
  };

  return router;
};

// add this to a top level component
const pathname = usePathname();
const searchParams = useSearchParams();

useEffect(() => {
  NProgress.done();
}, [pathname, searchParams]);

are you using this library or the nprogress ?
where is that NProgress coming from?

[zbeyens]

@PixeledCode Forgot to mention I've forked that library

[PixeledCode]

@PixeledCode Forgot to mention I've forked that library

is your code open? can you share it?

[zbeyens]

@PixeledCode Nothing different than this repo. You just need to import NProgress to start/stop anywhere you want.

import * as NProgress from 'nprogress';

[Abesoddy]

It would be great to have this feature! Thank you for your work! :)

[PixeledCode]

@PixeledCode Nothing different than this repo. You just need to import NProgress to start/stop anywhere you want.

import * as NProgress from 'nprogress';

Thanks for this, this approach worked.
I am getting this warning, Entire page /[locale]/dashboard/dataset/new deopted into client-side rendering. and since we are using useSearchParams on top level, I guess this warning will stay, right?

[Darren120]

import * as NProgress from 'nprogress';

Do you have a workaround with router.refresh() support? most mutations are now just calling refresh to refetch data.

[mrsafalpiya]

@PixeledCode Nothing different than this repo. You just need to import NProgress to start/stop anywhere you want.

import * as NProgress from 'nprogress';

Thanks for this, this approach worked. I am getting this warning, Entire page /[locale]/dashboard/dataset/new deopted into client-side rendering. and since we are using useSearchParams on top level, I guess this warning will stay, right?

This can be fixed by wrapping around the component by react suspense.

<Suspense fallback={null}><NProgressTop /></Suspense>

[uixmat]

Just put your useRouter in a function and include NProgress.start(); as @zbeyens mentioned.

Add:

import * as NProgress from "nprogress";
import { useRouter } from "next/navigation";

Example usage:

const router = useRouter();
const handlePush = () => {
    NProgress.start();
    router.push("/some-page");
};

nextjs-toploader uses NProgress under the hud.

[dan-pugsley]

This progress bar package handles Next 13, both <Link> and router.push() 👍.

You only have to modify your useRouter imports to import { useRouter } from 'next-nprogress-bar'.

Works well!