Too Simple page transitions for Next.js. You can do better though bruv...

_app.js

import { PageTrans } from 'components'

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

export default MyApp

page-trans.css

.page-trans-exiting {
  animation: fade-out 0.3s ease both;
}

.page-trans-entering {
  display: none;
}

.page-trans-entered {
  animation: fade-in 0.2s ease both;
}

@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

PageTrans.js

import React, { useEffect } from 'react'
import Router, { useRouter } from 'next/router'

function PageTrans(props) {
  const router = useRouter()
  let transTime = 100

  useEffect(() => {
    const handleRouteExit = () => {
      document.documentElement.classList.remove('page-trans-entered')
      document.documentElement.classList.add('page-trans-exiting')
    }

    Router.events.on('routeChangeStart', handleRouteExit)

    return () => {
      Router.events.off('routeChangeStart', handleRouteExit)
    }
  }, [])

  useEffect(() => {
    const handleRouteEnter = () => {
      document.documentElement.classList.remove('page-trans-exiting')
      document.documentElement.classList.add('page-trans-entering')
      setTimeout(() => {
        document.documentElement.classList.remove('page-trans-entering')
        document.documentElement.classList.add('page-trans-entered')
      }, transTime)
    }

    Router.events.on('routeChangeComplete', handleRouteEnter)
    Router.events.on('routeChangeError', handleRouteEnter)
    return () => {
      Router.events.off('routeChangeComplete', handleRouteEnter)
      Router.events.off('routeChangeError', handleRouteEnter)
    }
  }, [transTime])

  return <React.Fragment>{props.children}</React.Fragment>
}

export default PageTrans