Meningkatkan UX Aplikasi Next.js Dengan Page Loading Indicator

Pengantar

Next.js merupakan salah satu standar kerangka kerja untuk membangun sebuah aplikasi React.

Navigasi Client-Side merupakan tipikal untuk aplikasi SPA (Single Page Application) dan memiliki banyak keuntungan. Next.js menyediakan tools yang mudah digunakan seperti komponen Link dan Router untuk menggunakan navigasi dari sisi klien. Tetapi dengan semua kelebihannya, ia memiliki satu kelemahan UX (User Experience) untuk pengguna.

Salah satunya yaitu, framework tersebut tidak membuat indikasi pemuatan laman, yang biasanya terjadi dalam kasus situs multi-halaman. Tanpa indikator pemuatan (Load Browser), halaman terlihat berhenti saat halaman mengambil konten melalui JavaScript. Ini bisa sangat membingungkan bagi pengguna dan berdampak negatif pada pengalaman pengguna situs.

Mari Kita Mulai

1. Install paket nprogress
2. Bind nprogress ke navigasi events pada Router Next.js

Cukup dengan dua langkah tersebut kita dapat menambahkan loading indicator halaman pada aplikasi Next.js kita.

1. Install paket nprogress

nprogress merupakan sebuah paket yang menyediakan animasi progress bar. Install dengan perintah berikut:

npm i nprogress

atau

yarn i nprogress

2. Bind untuk Navigasi Events

Kita perlu trigger animasi nprogress saat navigasi sisi klien mulai dan berhenti saat navigasi selesai. Kita bisa menggunakan event Router bawaan di Next.js untuk binding.

Dalam kasus ini, kita bind event tersebut dalam komponen App khusus untuk menjaga kode tetap teratur.

import Router from 'next/router';
import NProgress from 'nprogress'; // nprogress module
import 'nprogress/nprogress.css'; // styles of nprogress

// Binding events
Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp;

Pastikan bind event handler di luar komponen untuk menghindari binding beberapa handler. Untuk styling CSS nprogress berfungsi di Next.js versi 9.3 terbaru.

Jika kamu menggunakan versi yang lebih lama, kamu perlu menginstall plugin untuk memuat CSS. Saya dapat menyarankan kamu dengan menggunakan @webdeb/next-styles

Sekian dan Semoga bermanfaat. Sampai Jumpa.