NextJS のアプリケーション ディレクトリに読み込みインジケーターまたはプログレス バーを作成する: ステップバイステップ ガイド

Question

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

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

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

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

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

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

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

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

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

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

Answer 1

更新

これは新しい Next.js 13 アプリ ディレクトリで一般的な問題であることがわかりました。アプリ ルーターの動作で発生した複数の問題を含め、これに関連する未解決の問題がいくつかあります。

それで、なんとか next-n-progress を使用することができましたが、これは、リンクされたコンポーネント を使用することによってのみ機能することに気付きました。これは、読み込みをトリガーして進行状況バーを表示し、プリフェッチ機能を備えているためです。ビューポート上に存在するリンク。

したがって、それまでの間、単純なナビゲーションの場合は、引き続き Router.push の代わりに Link を使用してください。