Detail Page

Implementation details and code examples

How It Works

  • Uses React 19's `useOptimistic` for immediate UI updates
  • Implements smooth easing animations with custom timing
  • Automatically manages progress state during navigation
  • Zero dependencies for minimal bundle impact

Quick Implementation

Add to your root layout:

'use client';

import { 
  NextNavigationProgressProvider,
  NextNavigationProgressBar,
  NavigationLink 
} from 'next-navigation-progress';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <NextNavigationProgressProvider>
          <NextNavigationProgressBar />
          {children}
        </NextNavigationProgressProvider>
      </body>
    </html>
  );
}

Continue Exploring