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: vercel/next.js#41745 (comment)

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

[AlanMorel]

Would love to see this addressed, more and more people are on Next 13 by the day

[Pyakz]

Any updates on next13? is there any way to pull this off?

[jimapl]

!bump!
On production in app directory. Plz help:p

[mairura]

Working with this module and it has an issue with the latest version of nextjs, any assistance will be much appreciated at this point.

[imranbarbhuiya]

I couldn't find any way to implement it for appDir, you can still use it with pages dir in the latest version of nextjs but for appDir, since it's still in beta so for now use loading.tsx and if they bring back router.events or any similar api in appDir before the stable release, we'll add support for it

[karlhorky]

This discussion thread may be relevant:

• [Feedback] App Directory Beta vercel/next.js#41745 (comment)

@jmcmullen's workaround over there (seems kind of hacky, but maybe it's a way forward in the interim until the events are exposed by Next.js in the app directory?):

I managed to get it working on all links. You can create the following client component and include it inside your root layout.tsx file

"use client";
import { useEffect } from "react";
import NProgress from "nprogress";

type PushStateInput = [
  data: any,
  unused: string,
  url?: string | URL | null | undefined
];

export default function ProgressBar() {
  const height = "2px";
  const color = "#F6F01E";

  const styles = (
    <style>
      {`
        #nprogress {
          pointer-events: none;
        }
        #nprogress .bar {
          background: ${color};
          position: fixed;
          z-index: 99999;
          top: 0;
          left: 0;
          width: 100%;
          height: ${typeof height === `string` ? height : `${height}px`};
        }
        /* Fancy blur effect */
        #nprogress .peg {
          display: block;
          position: absolute;
          right: 0px;
          width: 100px;
          height: 100%;
          box-shadow: 0 0 10px ${color}, 0 0 5px ${color};
          opacity: 1.0;
          -webkit-transform: rotate(3deg) translate(0px, -4px);
              -ms-transform: rotate(3deg) translate(0px, -4px);
                  transform: rotate(3deg) translate(0px, -4px);
        }
    `}
    </style>
  );

  useEffect(() => {
    NProgress.configure({ showSpinner: false });

    const handleAnchorClick = (event: MouseEvent) => {
      const targetUrl = (event.currentTarget as HTMLAnchorElement).href;
      const currentUrl = location.href;
      if (targetUrl !== currentUrl) {
        NProgress.start();
      }
    };

    const handleMutation: MutationCallback = () => {
      const anchorElements = document.querySelectorAll("a");
      anchorElements.forEach((anchor) =>
        anchor.addEventListener("click", handleAnchorClick)
      );
    };

    const mutationObserver = new MutationObserver(handleMutation);
    mutationObserver.observe(document, { childList: true, subtree: true });

    window.history.pushState = new Proxy(window.history.pushState, {
      apply: (target, thisArg, argArray: PushStateInput) => {
        NProgress.done();
        return target.apply(thisArg, argArray);
      },
    });
  });

  return styles;
}

[anamiikajha]

Any updates on next13? is there any way to pull this off?

I found this npm package: https://www.npmjs.com/package/nextjs-toploader

• It perfectly works with the next js 13 in the layout.js for the app directory

[jimapl]

Any updates on next13? is there any way to pull this off?

I found this npm package: https://www.npmjs.com/package/nextjs-toploader

• It perfectly works with the next js 13 in the page.js for the app directory

No shit

[Pyakz]

Any updates on next13? is there any way to pull this off?

I found this npm package: https://www.npmjs.com/package/nextjs-toploader

* It perfectly works with the next js 13 in the `page.js` for the `app` directory

Any updates on next13? is there any way to pull this off?

I found this npm package: https://www.npmjs.com/package/nextjs-toploader

• It perfectly works with the next js 13 in the page.js for the app directory

No shit

does it work?

[anamiikajha]

Yeah, works for me very well.

[Pyakz]

Yeah, works for me very well.

i put it in my _layout, it doesnt work

[EdsonLucasbd]

Any updates on next13? is there any way to pull this off?

I found this npm package: https://www.npmjs.com/package/nextjs-toploader

* It perfectly works with the next js 13 in the `page.js` for the `app` directory

Any updates on next13? is there any way to pull this off?

I found this npm package: https://www.npmjs.com/package/nextjs-toploader

• It perfectly works with the next js 13 in the page.js for the app directory

No shit

does it work?

I inserted in my layout.tsx inside the body tag, it worked for me

[apal21]

Hey everyone, this is working for me in NextJS v13.

I have created a quick demo of this package.

Here is my package.json file:

{
  "name": "test-progress",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "18.15.3",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "next": "13.2.4",
    "nextjs-progressbar": "^0.0.16",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.0.2"
  }
}

---

This is pages/_app.tsx:

import type { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import NextProgressbar from 'nextjs-progressbar';
import { useEffect, useState } from 'react';

export default function App({ Component, pageProps }: AppProps) {
  const [isLoading, setLoading] = useState(false);

  const router = useRouter();

  useEffect(() => {
    // Handle route change
    router.events.on('routeChangeStart', (url) => {
      setLoading(true);
    });

    router.events.on('routeChangeError', () => {
      setTimeout(() => {
        setLoading(false);
      }, 2000);
    });

    router.events.on('routeChangeComplete', () => {
      setTimeout(() => {
        setLoading(false);
      }, 2000);
    });
  }, []);

  return (
    <>
      {isLoading ? <NextProgressbar /> : null}
      <Component {...pageProps} />
    </>
  );
}

---

This is pages/index.tsx:

import Link from 'next/link'

export default function Home() {
  return (
    <>
      Index
      <Link href="/about">About</Link>
    </>
  )
}

---

This is pages/about.tsx:

import Link from 'next/link'

function AboutPage() {
  return <h1>About Page <Link href="/">Home</Link></h1>
}

export default AboutPage

Keeping this thread open for a few more days.

[karlhorky]

@apal21 this is about the app/ directory, as noted in this paragraph in the description:

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

Probably the issue title should be changed.