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!

[nodegin]

@dan-pugsley awesome!

[hongaar]

#10 (comment) works like a charm, here's a TypeScript version I'm using:

// useRouter.ts

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

export function useRouter() {
  const router = useBaseRouter();

  const { push } = router;

  router.push = async (...args: Parameters<typeof push>) => {
    NProgress.start();
    return push(...args);
  };

  return router;
}

[lucas-barake]

If you're using the next/router pages router, this might be of help:

import { useRouter } from "next/router";
import NProgress from "nprogress";

export function useCustomRouter(): ReturnType<typeof useRouter> {
  const router = useRouter();

  const originalPush = router.push;

  router.push = (...args: Parameters<typeof router.push>): ReturnType<typeof originalPush> => {
    NProgress.start();
    return originalPush(...args);
  };

  return router;
}

[rodrigocipriani]

#10 (comment) works like a charm, here's a TypeScript version I'm using:

// useRouter.ts

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

export function useRouter() {
  const router = useBaseRouter();

  const { push } = router;

  router.push = async (...args: Parameters<typeof push>) => {
    NProgress.start();
    return push(...args);
  };

  return router;
}

Nice solution, but for me it starts loading and never ends

[hongaar]

Nice solution, but for me it starts loading and never ends

@rodrigocipriani You will probably need to add some code to make the toploader stop spinning, see:
#10 (comment)

[LuisanSuarez]

This is not a good solution.

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!

to use this library with Next 13+, you must turn your RootLayout into a client component with 'use client'. this turns your entire app into a client-rendered app, see the docs.

if your server component do any db fetching or use .env vars that are meant to be private (i.e. not prefixed with NEXT_PUBLIC_), then they will break. you won't be able to directly run server-side database queries on a client environment, and your .env vars will be undefined.

EDIT: fixed broken link to Next docs

[PixeledCode]

This is not a good solution.

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!

to use this library with Next 13+, you must turn your RootLayout into a client component with 'use client'. this turns your entire app into a client-rendered app, see the docs.

if your server component do any db fetching or use .env vars that are meant to be private (i.e. not prefixed with NEXT_PUBLIC_), then they will break. you won't be able to directly run server-side database queries on a client environment, and your .env vars will be undefined.

So you have to treat it like any other provider wrapper. Usually you will create a separate Provider component, add all of the components like this and then wrap layout with it. It's a pretty common pattern

[LuisanSuarez]

This is not a good solution.
...
if your server component do any db fetching or use .env vars that are meant to be private (i.e. not prefixed with NEXT_PUBLIC_), then they will break. you won't be able to directly run server-side database queries on a client environment, and your .env vars will be undefined.

So you have to treat it like any other provider wrapper. Usually you will create a separate Provider component, add all of the components like this and then wrap layout with it. It's a pretty common pattern

The Provider pattern is fine too, but you're making a 'use-client' component a parent of all of your app. This turns your entire app into part of the client bundle, and none of it will be server rendered. If you don't care about server rendering it's not an issue. If you do however you can't use next-nprogress-bar.

[mohammad-mo]

This approach worked for me and i didn't had to use this useEffect in my layout:
The useEffect:

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

The custom hook:

import { useRouter } from 'next/router'
import { NextRouter } from 'next/router'
import * as NProgress from 'nprogress'

/**
 * @typedef {Object} UseCommonReturn
 * @property {NextRouter} router - The router object from the Next.js router context.
 */

/**
 * Returns an object containing the router.
 *
 * @return {UseCommonReturn} An object containing the router.
 */

export default function useCommon() {
	const router = useRouter()

	const pRouter = {
		...router,
		push: async (href, options) => {
			NProgress.start()
			return router.push(href, options).finally(() => {
				NProgress.done()
			})
		},
	}

	return { pRouter }
}

[tjmcdonough]

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 I was getting a maximum call stack exception with your solution when quickly changing pages. I come up with this in the end

import { useRouter, usePathname } from "next/navigation";
import NProgress from "nprogress";
import { useEffect } from "react";

export const useRouterWithLoader = () => {
  const router = useRouter();
  const pathname = usePathname();

  const pushWithLoader = (href: string, options: any) => {
    NProgress.start();
    return router.push(href, options);
  };

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

  return {
    ...router,
    push: pushWithLoader,
  };
};

[RanitManik]

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

This really does the job.

[rakibul-islam-hasib]

Use this method to you component . It works 100% .

'use client';
import React, { useCallback, useState, useRef } from 'react'
import Link from 'next/link'

type UseHiddenLinkReturn = {
    navigate: (href: string) => void
    isNavigating: boolean
    HiddenLink: React.FC
}

export const useLinkNavigation = (): UseHiddenLinkReturn => {
    const [href, setHref] = useState<string | null>(null)
    const [isNavigating, setIsNavigating] = useState(false)
    const linkRef = useRef<HTMLAnchorElement>(null)

    const navigate = useCallback((newHref: string) => {
        setHref(newHref)
        setIsNavigating(true)
        setTimeout(() => {
            linkRef.current?.click()
        }, 0)
    }, [])

    const HiddenLink: React.FC = () => (
        <Link
            href={href || ''}
            ref={linkRef}
            tabIndex={-1}
            aria-hidden="true"
            onClick={() => setIsNavigating(false)}
            className="sr-only"
        >
            Navigating to {href}
        </Link>
    )

    return { navigate, isNavigating, HiddenLink }
}



// Example usage of the hook
export default function NavigationExample() {
  const { navigate, isNavigating, HiddenLink } = useHiddenLink()

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">Hidden Link Navigation Example</h1>
      <button
        onClick={() => navigate('/dashboard')}
        className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors"
        disabled={isNavigating}
      >
        {isNavigating ? 'Navigating...' : 'Go to Dashboard'}
      </button>
      <div className="sr-only" aria-live="polite">
        {isNavigating && 'Navigating to dashboard...'}
      </div>
      <HiddenLink />
    </div>
  )
}