2023 Hacktoberfest #4

Issue/PR

I fixed two issues in this project, but this issue was more complicated and I spent lots of time to fix the problem. The issue was to fix Progress bar when screens are loading, and Progress bar was implemented in Next.js. However, I found out router.events from next/router was not available on Next.js 13 and it needed to be fixed.

 useEffect(() => {
    function onRouteChangeStart() {
      setIsAnimating(true);
    }

    function onRouteChangeComplete() {
      setIsAnimating(false);
    }

    router.events.on("routeChangeStart", onRouteChangeStart);
    router.events.on("routeChangeComplete", onRouteChangeComplete);

    // Unassign event listener
    return () => {
      router.events.off("routeChangeComplete", onRouteChangeComplete);
      router.events.off("routeChangeStart", onRouteChangeStart);
    };
  }, [router]);

router.events.on and router.events.off were used when pages loading, but after version was upgraded and that methods were deprecated, so I looked for a solution and eventually found a workaround to use NextTopLoader library. This library is really straight-forward and it's easy for users to use, but the default progress bar is in blue. However, the author wanted to put gradient to the progress bar for a better look. I was struggling with applying CSS to the progress bar, fortunately the library also offered template attribute for users to apply their own CSS to the progress bar.

  <NextTopLoader
          easing="linear"
          showSpinner={false}
          template='<div class="bar" role="bar"><div class="gradient"></div></div>'
        />

@layer {
  .gradient {
    background-image: linear-gradient(
      to right,
      rgb(251, 146, 60),
      rgb(219, 39, 119)
    );
    height: 0.25rem;
    width: 100%;
    left: 0px;
    top: 0px;
    position: fixed;
    z-index: 50;
  }
}

I simply created CSS gradient and applied it to the progress bar, and it worked as I expected. From this issue, I gained knowledge of Next.js and I got interested in it. Also, I saw that Next.js 14 was released a couple of days ago, and I'm wondering if router.events.off/on is back or not because many people like me were suffering on Next.js 13. If I have an opportunity, I'd like to update a progress bar with Next.js 14 without using the library because the library has a variety of restrictions.