不确定推荐的方法，但在页面加载期间添加加载指示器的一种方法是使用Next.js内置路由器。
你可以监听它的routeChangeStart和routeChangeComplete事件来显示和隐藏加载指示器。我是这样实现的：

import { useState, useEffect } from "react";
import Router from "next/router";

const LoadingWidget = () => {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const handleRouteChangeStart = () => setLoading(true);
    const handleRouteChangeComplete = () => setLoading(false);

    Router.events.on("routeChangeStart", handleRouteChangeStart);
    Router.events.on("routeChangeComplete", handleRouteChangeComplete);

    return () => {
      Router.events.off("routeChangeStart", handleRouteChangeStart);
      Router.events.off("routeChangeComplete", handleRouteChangeComplete);
    };
  }, []);

  return loading ? <div>Loading...</div> : null;
};

export default LoadingWidget;

然后，您可以导入并呈现_app.js文件中的LoadingWidget组件或 Package 整个应用程序的任何其他组件。

import LoadingWidget from "../components/LoadingWidget";

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

export default MyApp;