Next 13 app dir support

[Fedeorlandau]

Hello there, I've noticed that next 13 removed router.events (the API that this lib uses to detect the route change)

There is a conversation going on here relevant for this topic: https://github.com/vercel/next.js/discussions/41745#discussioncomment-3986452

Anyone found a nasty workaround to get a progress bar at the top of the page on Next 13 (app directory)?

Thanks!

[HaNdTriX]

In chromium based browsers you might use the new native navigation api, though this doesn't work in Firefox or Safari 🤔.

useEffect(() => {
  const { navigation } = window;
  if (navigation) {
    navigation.addEventListener("navigate", routeChangeStart);
    navigation.addEventListener("navigateerror", routeChangeError);
    navigation.addEventListener("navigatesuccess", routeChangeEnd);
    return () => {
      navigation.removeEventListener("navigate", routeChangeStart);
      navigation.removeEventListener("navigateerror", routeChangeError);
      navigation.removeEventListener("navigatesuccess", routeChangeEnd);
    };
  }
}, []);

https://developer.chrome.com/docs/web-platform/navigation-api