Next.js Page Transition

_app.js

// Tailwinds Styles
import '../styles/globals.css';

import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';
import classNames from 'classnames';

function MyApp({ Component, pageProps }) {

  const [transition, setTransition] = useState('opacity-100');

  // Router Events
  useEffect(() => {
    const router = useRouter();

    const handleRouteChange = (url) => {
      setTransition('opacity-0');
    };
    const handleRouteChangeComplete = (url) => {
      setTransition('opacity-100');
    };

    router.events.on('routeChangeStart', handleRouteChange);
    router.events.on('routeChangeComplete', handleRouteChangeComplete);

    return () => {
      router.events.off('routeChangeStart', handleRouteChange);
      router.events.off('routeChangeComplete', handleRouteChangeComplete);
    };
  }, []);

  return (
      <div className={classNames('transition duration-300', transition)}>
        <Component {...pageProps} />
      </div>
  );
}
export default MyApp;