Progress Bar for Navigation Loading State

Implement a progress bar that signals the loading state when navigating between routes in Next.js 14.
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import NProgress from 'nprogress'; // Ensure NProgress package is installed (`npm install nprogress`)

export default function ProgressBar() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const handleStart = (url) => url !== router.asPath && setLoading(true);
    const handleComplete = (url) => url === router.asPath && setLoading(false);'routeChangeStart', handleStart);'routeChangeComplete', handleComplete);'routeChangeError', handleComplete);

    return () => {'routeChangeStart', handleStart);'routeChangeComplete', handleComplete);'routeChangeError', handleComplete);
  }, [router]);

  useEffect(() => {
    if (loading) {
    } else {
  }, [loading]);

  return null;
This JS code sets up a progress bar with NProgress that reacts to Next.js router events. It handles the start and completion of page navigations, displaying a loading bar on top of the page.
import '../node_modules/nprogress/nprogress.css'; // Load NProgress styles
Include this import statement at the top of your custom _app.js file to ensure the NProgress CSS is loaded.
<ProgressBar />
Add this JSX tag in your custom _app.js component to incorporate the Progress Bar into the layout.