Membuat Component Progress Bar Next.js

Next.js adalah framework JavaScript populer untuk membangun aplikasi web. Salah satu fiturnya adalah kemampuan untuk menghasilkan versi statis dari aplikasi Next.js (getStaticProps) dan kemampuan untuk mengambil data di server dan membuatnya tersedia pada saat pre-render(getServerSideProps).

Ketika kita menggunakan getStaticProps maka perpindahan antar halaman menjadi lebih cepat karena client hanya perlu mengambil halaman statis saja tanpa perlu diproses oleh server. Perpindahan halaman ini tidak membuat browser merefresh halaman (hard refresh) tetapi hanya mengganti contenya saja.

Jika internet berjalan lancar tentu ini bukanlah masalah tetapi bagaimana jika terdapat gangguan. User hanya dihadapkan halaman yang sama terus menurus tanpa pergerakan/progress dari website. Tentu hal ini akan membingungkan bagi user.

Oleh karena itu kita akan menambahkan sebuah indikator progress bar pada bagian halaman. Progress bar akan terlihat ketika user memberikan aksi pada website. Jika tidak ingin repot membuat component terdapat beberapa package misalnya nextjs-progressbar. kita akan membahasnya nanti, sekarang kita akan membuat component proggress bar kita sendiri.

Progressbar dapat memberikan representasi visual dari kemajuan suatu tugas, yang dapat membantu pengguna untuk memahami kemajuan tugas yang telah diselesaikan dan berapa banyak yang masih tersisa. Progressbar juga memungkinkan pengguna untuk mengukur perkiraan waktu yang tersisa untuk menyelesaikan suatu tugas.

Langkah Pertama

Buat sebuah file pada component → progressbar.tsx lalu isi kode dibawah ini.

Langkah kedua

Selanjutnya meng-import komponent pada layout website. seperti pada pages → layout → index.tsx . Sesuaikan dengan kebutuhan anda.

import Header from "../../components/header"
import Footer from "../../components/footer"
//import nextprogresss compoonent
import NextNProgress from '../../components/nprogress';

const Layout = ({ categories, children }: Props) => {
    return (
        <>
            <div className="relative h-screen bg-gradient-to-b-white dark:bg-gradient-to-b lg:h-[140vh]">
                <NextNProgress options={{ showSpinner: false }} />
                <Header categories={categories} />
                <main>{children}</main>
                <Footer />
            </div>
        </>
    )
}

export default Layout;

Sekarang coba buka website anda lalu menuju kesuatu halaman, maka akan muncul progressbar di atas halaman.