私は NextJS 13 を使用して大規模な Web アプリケーションを開発しました。最初のバージョンは Pages Router を使用しました。

Web サイトのほぼ全体を完成させた後、アプリケーション ディレクトリ に正常に移行しました。

この移行は本質的には新しいルーティング機能をアップグレードすることではありませんが、_app.tsx にインポートされた大きな SASS コンパイル済みファイルを変更して、Web サイトの読み込み時間を短縮したいと考えています。

このプロジェクトでは読み込みが大きな問題だったので、MUI を使用して各コンポーネントのスタイルを設定し始めました。これは単なる CSS-in-JS ソリューションでした。

しかし、新しいアプリケーション ディレクトリで見つかった問題はルーター イベントです。next-n-progress パッケージのプログレス バー インジケーターがありましたが、今は機能しません。ユーザーは単一のリンクをクリックすると、アプリケーションが次のページを読み込むまでに時間がかかります。

各ページのルート ディレクトリに loading.tsx ファイルを配置しているため、SSR ページではこの問題は発生しませんが、クライアント構成のあるページでは問題が依然として存在します。

例: ホームページ、ログインと登録など。

新しいアプリケーション ディレクトリをサポートする別のプログレス バー パッケージを試しましたが、まったく表示されませんでした。

これはレイアウトを担当するコンポーネントです: GitHub コンポーネントのパーマリンク

この新しい NextJS 13 アップデートを使用して新しい進行状況バーを作成する方法はありますか?