Menambahkan Progress Bar pada Next.js

Pernahkan kamu bertanya-tanya bagaimana caranya menambahkan progress bar biru setiap kali perpindahan halaman seperti gambar berikut?

Pada tutorial kali ini kita akan belajar bagaimana cara nenambahkan progress bar dengan 2 langkah mudah, yuk cekidot:

Step 1: Instalasi

Jalankan command berikut pada terminal.

npm install nextjs-toploader

npm install nextjs-toploader

Step 2: Integrasi

Tambahkan NextTopLoader pada layout aplikasimu. (Next JS - App Dir)

layout.tsx

import NextTopLoader from "nextjs-toploader";
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextTopLoader />
        {children}
      </body>
    </html>
  );
}

import NextTopLoader from "nextjs-toploader";
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextTopLoader />
        {children}
      </body>
    </html>
  );
}

Bagi kamu yang masih menggunakan Next.js 12 atau kebawah kamu dapat menambahkan di file pages/_app.js.

pages/_app.js

import NextTopLoader from "nextjs-toploader";
 
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextTopLoader />
      <Component {...pageProps} />;
    </>
  );
}

import NextTopLoader from "nextjs-toploader";
 
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NextTopLoader />
      <Component {...pageProps} />;
    </>
  );
}

Jika ingin konfigurasi lebih jauh kamu dapat memodifikasi property berikut.

<NextTopLoader
  color="#2299DD"
  initialPosition={0.08}
  crawlSpeed={200}
  height={3}
  crawl={true}
  showSpinner={true}
  easing="ease"
  speed={200}
  shadow="0 0 10px #2299DD,0 0 5px #2299DD"
/>

<NextTopLoader
  color="#2299DD"
  initialPosition={0.08}
  crawlSpeed={200}
  height={3}
  crawl={true}
  showSpinner={true}
  easing="ease"
  speed={200}
  shadow="0 0 10px #2299DD,0 0 5px #2299DD"
/>

Selamat kamu sudah berhasil menambahkan progress bar pada aplikasi Next.js-mu.