Membuat Preloader untuk Next.js

Next.js adalah salah satu kerangka kerja berbasis react.js yang memiliki fitur cukup lengkap dan bisa dengan mudah digunakan tanpa harus melakukan banyak pengaturan konfigurasi.

Salah satu fitur utama Next.js adalah kemampuannya untuk membuat aplikasi / website dengan metode server rendered. Dengan fitur ini, halaman web akan dibuat oleh server sesuai dengan permintaan pengguna menggunakan sumber data yang digunakan oleh aplikasi, misal berasal dari Database, API pihak ketiga, atau Headless CMS, sehingga data yang ditampilkan akan selalu terbaharui.

Kelebihan lain dari fitur server rendered Next.js adalah setelah halaman awal berhasil ditampilkan di browser, maka navigasi ke halaman lain dari aplikasi akan ditangani oleh javascript di browser tanpa harus melakukan request keseluruhan halaman ke server. Hal ini akan membuat aplikasi berjalan jauh lebih ringan dan terlihat lebih responsif.

Tetapi ada kalanya, sebuah halaman membutuhkan data yang cukup kompleks, sehingga proses perpindahan halaman menjadi terhambat. Proses pemuatan halaman baru juga tidak melibatkan proses pemuatan halaman secara keseluruhan, sehingga browser tidak akan menampilkan loading indicator-nya, yang akan membuat bingung pengguna.

Untuk mengatasi hal ini, sebaiknya kita menambahkan komponen preloader pada aplikasi Next.js. Sehingga ketika akan memuat halaman yang membutuhkan data, preloader akan ditampilkan dan dapat memberikan informasi pada pengguna jika ada proses yang sedang berlangsung.

Kita dapat membuat sendiri komponen preloader yang akan kita gunakan, tapi untuk mempermudah, kita juga bisa menggunakan pustaka preloader yang tersedia secara bebas seperti nprogress. Berikut adalah tahap-tahap proses instalasi dan integrasi nprogress dengan Next.js.

1. Instalasi

Untuk membuat proyek Next.js baru, silakan gunakan perintah berikut.

$ npx create-next-app nama-aplikasi  

Harap diingat, Node.js dengan versi minimal 10.13 harus sudah terinstall di dalam sistem. Setelah proses selesai, silakan masuk ke dalam folder aplikasi baru tersebut dengan menggunakan perintah

cd nama-aplikasi

Instalasi nprogress dilakukan dengan menggunakan npm:

$ npm install --save nprogress

atau dengan yarn:

$ yarn add nprogress

2. Integrasi

Untuk melakukan integrasi nprogress dengan next.js, silakan buka file ./pages/_app.js pada proyek Next.js, kemudian tambahkan baris-baris berikut:

import NProgress from 'nprogress'
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import "nprogress/nprogress.css"
import "../styles/globals.css"

function MyApp({ Component, pageProps }) {
    const router = useRouter()
    const onStart = () => {
        NProgress.start()
    }
    const onComplete = () => {
        NProgress.done()
    }
    useEffect(() => {
        router.events.on('routeChangeStart', onStart)
        router.events.on('routeChangeComplete', onComplete)
        router.events.on('routeChangeError', onComplete)
        return () => {
            router.events.off('routeChangeStart', onStart)
            router.events.off('routeChangeComplete', onComplete)
            router.events.off('routeChangeError', onComplete)
        }
    }, [])
    return (
        <Component {...pageProps} />
    )
}

export default MyApp;

Silakan jalankan aplikasi Next.js dengan perintah:

npm run dev

Setelah aplikasi muncul di browser, silakan klik salah satu link, maka preloaded nprogress berbentuk progress bar tipis akan muncul di bagian atas halaman.

3. Pengaturan tambahan

Nprogress memiliki beberapa opsi pengaturan yang bisa dilihat langsung pada tautan berikut. Untuk mengatur konfigurasi tersebut, silakan tambahkan baris berikut pada file ./pages/_app.js.

...
import { useRouter } from 'next/router'
import "nprogress/nprogress.css"
import "../styles/globals.css"

NProgress.configure({
    showSpinner: false,
    minimum: 0.1,
    speed: 750
})

function MyApp({ Component, pageProps }) {
    const router = useRouter()
    const onStart = () => {
...

Dengan adanya preloader, akan menginformasikan kepada pengguna bahwa website berfungsi dengan baik, dan sedang ada proses yang berjalan seperti pada screenshot di bawah.

Demikian, semoga bermanfaat.