Diposting tanggal
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 🙂