Adding a top page loader between route transitions in Next.js

date

Nov 19, 2021

slug

nextjs-route-transiton-top-loader

status

Published

tags

Next.js

summary

type

Post

We will be using nProgress package to add the route transition loader. Install it using:

npm i nProgress

yarn add nProgress

Now create a nProgress.js component

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import NProgress from 'nprogress'

export default function Progress() {
  const router = useRouter()

  useEffect(() => {
    const start = () => NProgress.start()
    const done = () => NProgress.done()

    router.events.on('routeChangeStart', start)
    router.events.on('routeChangeComplete', done)
    router.events.on('routeChangeError', done)

    return () => {
      router.events.off('routeChangeStart', start)
      router.events.off('routeChangeComplete', done)
      router.events.off('routeChangeError', done)
    }
  }, [router.events])

  return <></>
}

Here we are using the next.js routers' different hooks like routeChangeStart, routeChangeComplete, and routeChangeError to trigger the start and end animations of the nProgress package.

To style our loader, create a nProgress.css file in your styles folder.

#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background-color: MediumVioletRed;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}

Now finish the setup by adding the component and it's styles in the _app.js file.

import NProgress from '../components/nProgress'

import '../styles/nProgress.css'

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

export default MyApp