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.

import Router from 'next/router';
import * as NProgress from 'nprogress';
import * as PropTypes from 'prop-types';
import * as React from 'react';

export interface NextNProgressProps {
    /**
     * The color of the bar.
     * @default "#29D"
     */
    color?: string;
    /**
     * The start position of the bar.
     * @default 0.3
     */
    startPosition?: number;
    /**
     * The stop delay in milliseconds.
     * @default 200
     */
    stopDelayMs?: number;
    /**
     * The height of the bar.
     * @default 3
     */
    height?: number;
    /**
     * Whether to show the bar on shallow routes.
     * @default true
     */
    showOnShallow?: boolean;
    /**
     * The other NProgress configuration options to pass to NProgress.
     * @default null
     */
    options?: Partial<NProgress.NProgressOptions>;
    /**
     * The nonce attribute to use for the `style` tag.
     * @default undefined
     */
    nonce?: string;

    /**
     * Use your custom CSS tag instead of the default one.
     * This is useful if you want to use a different style or minify the CSS.
     * @default (css) => <style nonce={nonce}>{css}</style>
     */
    transformCSS?: (css: string) => JSX.Element;
}

const NextNProgress = ({
    color = '#003865 linear-gradient(71.18deg, rgb(0, 34, 255)-27.32%, rgb(0, 34, 255)-16.39%, rgb(81, 121, 254)-7.38%, rgb(165, 237, 182) 30.59%, rgb(250, 232, 90) 46.06%, rgb(253, 172, 62) 62.61%, rgb(255, 92, 0) 75.82%);',
    startPosition = 0.3,
    stopDelayMs = 200,
    height = 3,
    showOnShallow = true,
    options,
    nonce,
    transformCSS = (css) => <style nonce={nonce}>{css}</style>,
}: NextNProgressProps) => {
    let timer: NodeJS.Timeout | null = null;

    React.useEffect(() => {
        if (options) {
            NProgress.configure(options);
        }
        Router.events.on('routeChangeStart', routeChangeStart);
        Router.events.on('routeChangeComplete', routeChangeEnd);
        Router.events.on('routeChangeError', routeChangeError);
        return () => {
            Router.events.off('routeChangeStart', routeChangeStart);
            Router.events.off('routeChangeComplete', routeChangeEnd);
            Router.events.off('routeChangeError', routeChangeError);
        };
    }, []);

    const routeChangeStart = (
        _: string,
        {
            shallow,
        }: {
            shallow: boolean;
        }
    ) => {
        if (!shallow || showOnShallow) {
            NProgress.set(startPosition);
            NProgress.start();
        }
    };

    const routeChangeEnd = (
        _: string,
        {
            shallow,
        }: {
            shallow: boolean;
        }
    ) => {
        if (!shallow || showOnShallow) {
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
                NProgress.done(true);
            }, stopDelayMs);
        }
    };

    const routeChangeError = (
        _err: Error,
        _url: string,
        {
            shallow,
        }: {
            shallow: boolean;
        }
    ) => {
        if (!shallow || showOnShallow) {
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
                NProgress.done(true);
            }, stopDelayMs);
        }
    };

    return transformCSS(`#nprogress{pointer-events:none}#nprogress .bar{background:${color};position:fixed;z-index:9999;top:0;left:0;width:100%;height:${height}px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px ${color},0 0 5px ${color};opacity:1;-webkit-transform:rotate(3deg) translate(0,-4px);-ms-transform:rotate(3deg) translate(0,-4px);transform:rotate(3deg) translate(0,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid 2px transparent;border-top-color:${color};border-left-color:${color};border-radius:50%;-webkit-animation:nprogresss-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .spinner,.nprogress-custom-parent #nprogress .bar{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}`);
};

NextNProgress.propTypes = {
    color: PropTypes.string,
    startPosition: PropTypes.number,
    stopDelayMs: PropTypes.number,
    height: PropTypes.number,
    showOnShallow: PropTypes.bool,
    options: PropTypes.object,
    nonce: PropTypes.string,
    transformCSS: PropTypes.func,
};

export default React.memo(NextNProgress);

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.

Ilustrasi Progressbar