Answer by HMR for Next.js getServerSideProps show loading

Here is an example using hooks.

pages/_app.js

    import Router from "next/router";    export default function App({ Component, pageProps }) {      const [loading, setLoading] = React.useState(false);      React.useEffect(() => {        const start = () => {          console.log("start");          setLoading(true);        };        const end = () => {          console.log("finished");          setLoading(false);        };        Router.events.on("routeChangeStart", start);        Router.events.on("routeChangeComplete", end);        Router.events.on("routeChangeError", end);        return () => {          Router.events.off("routeChangeStart", start);          Router.events.off("routeChangeComplete", end);          Router.events.off("routeChangeError", end);        };      }, []);      return (<>          {loading ? (<h1>Loading...</h1>          ) : (<Component {...pageProps} />          )}</>      );    }