Hey @naeem-qv

you can create a wrapper for <Link/>, and use onClick and unmount event to track the route change start and route change end. for useRouter() hook, you can create a custom hook and add a proxy to the router object to track the .push and .back invocation and use it as a trigger for route change start.

'use client'

import Link from 'next/link'
import { PropsWithChildren, useEffect } from 'react'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

export const CustomLink: React.FC<PropsWithChildren<{ href: string }>> = ({
    href,
    children
}) => {
    useEffect(() => {
        return () => {
            NProgress.done()
        }
    }, [])

    return (
        <>
            <Link href={href} onClick={() => NProgress.start()}>
                {children}
            </Link>
        </>
    )
}

I hope this helps.

This is actually a bit more tricky. Take care to handle the right keyboard modifiers in the onClick handler. If a user opens a link in a new tab by pressing a key on click, you might not want to start the loading animation.

The progress is not going to stop if the href is the same as the current relative URL. You would need a check in the onClick event handler similar to

    if (href === window.location.href.replace(window.location.origin, '')) {
      return;
    }

Please provide the code to handle it " If a user opens a link in a new tab by pressing a key on click, you might not want to start the loading animation."

Now its working as indented

"use client";
import Link from 'next/link';
import { PropsWithChildren, useEffect } from 'react';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

export const Linkn: React.FC<PropsWithChildren<{ href: string }>> = ({
  href,
  children,
}) => {
  useEffect(() => {
    return () => {
      NProgress.done();
    };
  }, []);

  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    if (shouldStartAnimation(e)) {
      NProgress.start();
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLAnchorElement>) => {
    if (shouldStartAnimation(e)) {
      NProgress.start();
    }
  };

  const shouldStartAnimation = (
    e:
      | React.MouseEvent<HTMLAnchorElement>
      | React.KeyboardEvent<HTMLAnchorElement>,
  ): boolean => {
    // Check if it's a left mouse click without any keyboard modifiers
    if (
      (e as React.MouseEvent<HTMLAnchorElement>).button === 0 &&
      !(e as React.MouseEvent<HTMLAnchorElement>).ctrlKey &&
      !(e as React.MouseEvent<HTMLAnchorElement>).shiftKey &&
      !(e as React.MouseEvent<HTMLAnchorElement>).metaKey
    ) {
      // Get the current pathname from window.location
      const currentPathname = window.location.pathname;

      // Check if the link's href is the same as the current pathname
      if (href === currentPathname) {
        return false; // Don't start the animation for same route links
      }

      return true;
    }

    // Check for middle mouse button click
    if ((e as React.MouseEvent<HTMLAnchorElement>).button === 1) {
      return false;
    }

    // Check for right mouse button click
    if ((e as React.MouseEvent<HTMLAnchorElement>).button === 2) {
      return false;
    }

    // Check if it's an accessibility event (e.g., screen reader activation)
    if (
      e.type === 'click' &&
      (e as React.MouseEvent<HTMLAnchorElement>).detail === 0
    ) {
      return true;
    }

    return false;
  };

  return (
    <Link href={href} legacyBehavior>
      <a
        onClick={handleClick}
        onKeyDown={handleKeyDown}
        tabIndex={0} // Ensure the link is keyboard focusable
      >
        {children}
      </a>
    </Link>
  );
};

Please add route events.

...and maybe extend the browser APIs rather than break them. Please :)

Same. Switching to App Router is a bit weird so far because I've not yet found a way to replicate this feature.

@garrettparris, @tinnohofficial, and others,
plz check my answer below, could be a solution to your issue :)

#41934 (comment)

The dependency array [pathname, searchParams] means that the function will execute on render as well as when any one of those values changes.

Thank you.

could you please give an example of how we should use it? it seems onRouteChangeStart is not working. I can not see "onStart 3" in my console

@saeideh-abs Use the Link component above instead of the standard Link component. On clicking it, you should see it.

It is suitable for routing with useRouter from "router/navigation"?

no... i think there is no possibility until there is no support by the app router... maybe any maintainer could give an update?

I need route change blocking for the exact same reason.

I literally just converted an old app to Next 14 with one of the big new features planned was preventing navigation away from un-saved forms... and now I find out it's not even possible with the latest stack (but was in the now-legacy pages directory).

I did get it working by moving the page(s) that need the beforeunload hooks into the pages directory and have everything else in the app directory, but this has some major drawbacks, namely that navigating between the app and pages directory looses all app context, since it is no longer working as a Single Page App. Meaning, I have to re-load my data (using SWR), and re-auth, which is very slow. So much so that I had to scrap it.

Very disappointing.

Oh no, I'm in the progress of migrating an app and I need to migrate exactly this feature. Yay.

Anyway to ask to Vercel team on working on this issue?

bump. is there any maintainer sticking around here?

But it's getting there rapidly with obvious improvements each release it must be said.

Agreed, router event is an important functionality for an app. It should have been prioritized in the first place.

now we are talking next.js 15 and it still doesn't feel production ready and still no router events.. it was such a big mistake from us starting two big production projects with the app router - now we are still stuck with this beta framework and very bad user experience :(

next 14 appearing in 2050 lol

it's here now and no improvements in terms of the router

NO improvement yet.

next.js 15 - still no improvements.. crazy

I am working in a package able to change route using events to make the load animation. https://www.npmjs.com/package/nextjs-progressloader

@samuhmatos Doesn't work when page is navigated using router.push()!

To invoke a route with progress bar animation, use the function changeRoute() instead router.push().
I hight recommend you read the documentation to see about Container and changeRoute()
see: https://github.com/samuhmatos/nextjs-progressloader#advanced-usage

You can add whatever route you would need. Everything you have to do is create a ContainerLink, but make sure where you're creating the container to be available where you need!

I rolled back to the pages router because I couldn't prevent useres from leaving page without saving.

If I want to do that, is it best to use the pages directory at the moment and be prepared to move to the app router at any time?

I think thy want we doing our own system navigation. Have sense? No, bu to Vercel has!

thats exactly the functionality what we are missing. it is impossible to implement with the app router :(

I am trying to find in the releases notes if they explained to the community, but still nothing.

Great!
For those who want to implement with NProgress:

'use client'

import { useRouter } from 'next/navigation'
import { useEffect, useOptimistic } from 'react'
import NProgress from 'nprogress'

export function LoadingIndicator() {
	const router = useRouter()
	const [loading, setLoading] = useOptimistic(false)

	useEffect(() => {
		if (router.push.name === 'patched') return
		const push = router.push
		router.push = function patched(...args) {
			setLoading(true)
			push.apply(history, args)
		}
	}, [])

	useEffect(() => {
		NProgress.configure({ showSpinner: false })
		if (loading) {
			NProgress.start()
		}
		return () => {
			NProgress.done()
		}
	}, [loading])

	return null
}

I have rewritten this code to be context useHook

"use client";

import { useRouter } from "next/navigation";
import { createContext, useContext, useEffect, useOptimistic } from "react";

const LoadingContext = createContext<{ loading: boolean }>({ loading: false });

export const LoadingProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const router = useRouter();
  const [loading, setLoading] = useOptimistic(false);
  useEffect(() => {
    if (router.push.name === "patched") return;
    const push = router.push;
    router.push = function patched(...args) {
      setLoading(true);
      push.apply(history, args);
    };
  }, []);

  return (
    <LoadingContext.Provider value={{ loading }}>
      {children}
    </LoadingContext.Provider>
  );
};

export const useLoadingContext = () => {
  return useContext(LoadingContext);
};

This works fine but why do i get an error when i want to do the same for router.back ?

UPDATE:

i just built the app and there are no errors whatsoever, looks like it has to something with dev env or maybe nextjs opts out some code in prod

"use client";
import _NProgress from "nprogress";
import { useRouter } from "next/navigation";
import { useEffect, useOptimistic } from "react";
import "nprogress/nprogress.css";

const NProgress = () => {
  const router = useRouter();
  const [loading, setLoading] = useOptimistic(false);
  useEffect(() => {
    if (router.push.name === "patched") return;
    const push = router.push;
    const back = router.back;
    router.push = function patched(...args) {
      setLoading(true);
      push.apply(history, args);
    };

	//errors An optimistic state update occurred outside a transition or action. 
	//To fix, move the update to an action, or wrap with startTransition.
    router.back = function patched(...args) {
      setLoading(true);
      back.apply(history, args);
    };
  }, []);

  useEffect(() => {
    _NProgress.configure({ showSpinner: false });
    if (loading) {
      _NProgress.start();
    }
    return () => {
      _NProgress.done();
    };
  }, [loading]);

  return null;
};

export default NProgress;

Hey @spacecat, did you see my message above? What do you mean by route blocking here and is it different from what I included?

@leerob I did, I read the entire thread, including your proposed solution, thoroughly. And I agree with most thumbs down/comments about that this should be included out of the box.

Also, the following is a no go for me and my current project:

"Also, manually wrapping all links and router.push calls is definitely tedious and it feels like there should be a simpler (built-in) approach"

From this comment: #41934 (reply in thread) (30 thumbs up)

I think that if you read the entire thread from top to bottom (including the hidden comments ;)) the message is clear; include the functionality so that it is built-in into the latest version of Next.js and the App Router.

Update: Out of curiosity I went to the main "Discussions" page and sorted the threads by "Top: All" and this one is at 15th place on the first page out of a total of 40 pages. I mean to me that says quite a lot.

Rather than wrapping every single call, can you create an abstraction in your app code? For example, rather than importing from next/link, you have the Link and router in a file which contain the abstraction. Then, you only have the code in one place. I understand this isn't built-in, but does this solution work for you?

Rather than wrapping every single call, can you create an abstraction in your app code? For example, rather than importing from next/link, you have the Link and router in a file which contain the abstraction. Then, you only have the code in one place. I understand this isn't built-in, but does this solution work for you?

@leerob Thank you for responding, I appreciate it. I will not implement this now. I've built a work-around that works for my project. I'm not relying on route blocking at all; I'm relying on React Context API and how I've structured my state in the context. I will definitely be monitoring this thread and hopefully this feature will exist in Next.js 16 (I'm aware of that Next.js 15 is in RC and it probably does not have route events ported from the Pages Router) and I can implement it then. Oh, one last thing: Please talk with the Next.js team and decide on in which major version of Nexj.js these features can be included. I would be okay with v16 or even 17, as long as it is included sometime in the future ;)

Unfortunately, there’s no browser behavior to prevent popstate (back or forward navigations), so there isn’t a way to add that to the router.

What about normal anchor tags? they are still used alongside with the Link component. We have came up with something in our team but it's super hacky and it doesn't work as expected sometimes. I think Next should do some in-house implementation of this...

Unfortunately, there’s no browser behavior to prevent popstate (back or forward navigations), so there isn’t a way to add that to the router.

@leerob in the old router it was possible to intercept and cancel the route change and fix the url. See my gist above. It would be great to be able to intercept route changes like this in the app router.