Client-Side Route Transitions with next/router

Illustrate how to implement smooth client-side transitions between routes using the useRouter hook and the next/router package.
import { useRouter } from 'next/router';
import { useEffect } from 'react';

function handleRouteChange(url, { shallow }) {
    `App is changing to ${url} ${
      shallow ? 'with' : 'without'
    } shallow routing`

function MyComponent() {
  const router = useRouter();

  useEffect(() => {
    // Before the route changes, your code here can make transitions smooth'routeChangeStart', handleRouteChange);

    // Cleanup the event handler on unmount
    return () => {'routeChangeStart', handleRouteChange);
  }, []);

  // Trigger a route change programmatically
  function goToAboutPage() {

  return (
      <button onClick={goToAboutPage}>Go to About Page</button>

export default MyComponent;
This code demonstrates how to listen for route changes in a Next.js application. We import the useRouter hook and useEffect to work with lifecycle events. The method is used to attach a 'routeChangeStart' event. When a route change starts, handleRouteChange function will run, potentially allowing developers to implement custom transition logic. The router.push method is then used within the goToAboutPage function to navigate to the '/about' route when a button is clicked. We also ensure to clean up and remove the event listener when the component unmounts.