私は NextJS 13 を使用して大規模な Web アプリケーションを開発しました。最初のバージョンは Pages Router を使用しました。
Web サイトのほぼ全体を完成させた後、アプリケーション ディレクトリ に正常に移行しました。
この移行は本質的には新しいルーティング機能をアップグレードすることではありませんが、_app.tsx にインポートされた大きな SASS コンパイル済みファイルを変更して、Web サイトの読み込み時間を短縮したいと考えています。
このプロジェクトでは読み込みが大きな問題だったので、MUI を使用して各コンポーネントのスタイルを設定し始めました。これは単なる CSS-in-JS ソリューションでした。
しかし、新しいアプリケーション ディレクトリで見つかった問題はルーター イベントです。next-n-progress パッケージのプログレス バー インジケーターがありましたが、今は機能しません。ユーザーは単一のリンクをクリックすると、アプリケーションが次のページを読み込むまでに時間がかかります。
各ページのルート ディレクトリに loading.tsx ファイルを配置しているため、SSR ページではこの問題は発生しませんが、クライアント構成のあるページでは問題が依然として存在します。
例: ホームページ、ログインと登録など。
新しいアプリケーション ディレクトリをサポートする別のプログレス バー パッケージを試しましたが、まったく表示されませんでした。
これはレイアウトを担当するコンポーネントです: GitHub コンポーネントのパーマリンク
この新しい NextJS 13 アップデートを使用して新しい進行状況バーを作成する方法はありますか?
更新
これは新しい Next.js 13 アプリ ディレクトリで一般的な問題であることがわかりました。アプリ ルーターの動作で発生した複数の問題を含め、これに関連する未解決の問題がいくつかあります。
それで、なんとか next-n-progress を使用することができましたが、これは、リンクされたコンポーネント を使用することによってのみ機能することに気付きました。これは、読み込みをトリガーして進行状況バーを表示し、プリフェッチ機能を備えているためです。ビューポート上に存在するリンク。
したがって、それまでの間、単純なナビゲーションの場合は、引き続き Router.push の代わりに Link を使用してください。