Menambahkan progress bar di Next.js

Diposting tanggal 3 Juli, 2021

Ketika perpindahan halaman, Next.js akan melakukannya secara “ajax”. Dari proses tersebut browser tidak melakukan full-reload dan tidak menampilkan indikator loading.

Kelebihannya adalah halaman terasa sangat cepat ketika dibuka dan ini akan meningkatkan user-experience tentunya, tapi jika halamannya berat maka yang user rasakan seolah olah halaman tidak merespon sama sekali dan dianggap nge-hang, padahal dibalik itu Next.js sedang memuat halaman yang dituju, hal itu justru akan berdampak negatif ke user experience.

Untuk itu diperlukanlah indikator loading, berikut tutorial sederhananya

Buka terminal lalu ketik command berikut

mkdir next-nprogress && cd next-nprogress
npm init -y && npm install next react react-dom nprogress

Command tsb akan membuat folder next-nprogress sekaligus memasang depedensi yang diperlukan

Edit file package.json dan sesuaikan npm-script seperti berikut

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

Sehingga kode akhir file package.json kurang lebih seperti berikut

{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^11.0.1",
    "nprogress": "^0.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

Selanjutnya buat folder pages dan buat 4 file di dalam folder tsb yaitu file _app.js index.js ringan.js dan berat.js

Isi kode dibawah untuk file index.js

import Link from 'next/link'

function Home() {
  return (
    <>
      <h1>Hai, selamat datang.</h1>
      <p><Link href="/ringan"><a>Contoh halaman ringan</a></Link></p>
      <p><Link href="/berat"><a>Contoh halaman berat</a></Link></p>
    </>
  )
}
export default Home

Kode dibawah untuk file ringan.js

import Link from 'next/link'

function Ringan() {
  return (
    <>
      <p>Halaman ringan, Lorem ipsum dolor sit amet.</p>
      <Link href="/"><a>Back to home</a></Link>
    </>
  )
}
export default Ringan

Kode dibawah untuk file berat.js

import Link from 'next/link'

export async function getServerSideProps() {
  await new Promise(resolve => setTimeout(resolve, 1000)) // contoh delay 1 detik (1000ms)
  return {
    props: {}
  }
}

function Berat() {
  return (
    <>
      <p>Halaman berat, Lorem ipsum dolor sit amet.</p>
      <Link href="/"><a>Back to home</a></Link>
    </>
  )
}
export default Berat

Terakhir kode dibawah untuk file _app.js

import Router from 'next/router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

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

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

export default App

Selesai, tinggal jalankan command npm run dev untuk melihat hasilnya

Terimakasih, semoga bermanfaat 🙂