Buat penunjuk pemuatan atau bar kemajuan dalam direktori aplikasi anda dalam NextJS: panduan langkah demi langkah

Question

Saya membangunkan aplikasi web yang besar menggunakan NextJS 13, versi pertama menggunakan Pages Router.

Selepas melengkapkan hampir keseluruhan laman web, saya berjaya berhijrah ke Direktori Aplikasi.

Penghijrahan ini pada asasnya bukan tentang menaik taraf beberapa fungsi penghalaan baharu, tetapi saya ingin menukar fail besar yang disusun SASS yang diimport dalam _app.tsx untuk mendapatkan masa muat tapak web yang lebih baik.

Memandangkan pemuatan merupakan isu besar untuk projek ini, saya mula menggunakan MUI untuk menggayakan setiap komponen, yang hanya penyelesaian CSS-dalam-JS.

Tetapi masalah yang saya temui dalam direktori apl baharu ialah peristiwa penghala, saya mempunyai penunjuk bar kemajuan daripada pakej next-n-progress tetapi kini ia tidak berfungsi, pengguna mengklik pautan dan apl memerlukan Ambil sedikit masa untuk memuatkan halaman seterusnya.

Isu ini bukan isu untuk halaman SSR kerana saya telah meletakkan fail loading.tsx dalam akar setiap halaman, tetapi isu itu masih wujud untuk halaman dengan konfigurasi klien.

Seperti laman utama, log masuk dan pendaftaran, dsb.

Saya mencuba pakej bar kemajuan lain yang menyokong direktori aplikasi baharu, tetapi ia tidak muncul sama sekali.

Ini ialah komponen yang bertanggungjawab untuk susun atur: Pautan kekal komponen GitHub

Adakah terdapat sebarang cara untuk mencipta bar kemajuan baharu menggunakan kemas kini NextJS 13 baharu ini?

Answer 1

Kemas kini

Saya mendapati ini adalah isu biasa dalam Direktori Apl Next.js 13 baharu, dan terdapat beberapa isu terbuka yang berkaitan dengannya, termasuk berbilang isu yang dihadapi dalam Gelagat Penghala Apl.

Jadi, saya berjaya menggunakan next-n-progress, tetapi saya perasan bahawa ia hanya berfungsi dengan menggunakan komponen pautan, kerana ia mencetuskan pemuatan untuk menunjukkan bar kemajuan, dan ia mempunyai prefetch untuk semua pautan yang terdapat pada viewport faedah daripada.

Jadi, sementara itu, untuk kes navigasi yang mudah, teruskan menggunakan Pautan dan bukannya Router.push.