UI Pemuatan & Ralat
Laksanakan keadaan pemuatan dengan `loading.js` dan kendalikan ralat secara baik menggunakan sempadan `error.js` dalam aplikasi anda.
UI Pemuatan & Ralat ialah pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.
Mengapa Keadaan Pemuatan Penting
Apabila aplikasi Next.js anda mendapatkan data, proses itu mungkin mengambil sedikit masa. Tanpa maklum balas visual, pengguna mungkin menyangka aplikasi itu terhenti atau rosak.
- Tingkatkan Pengalaman Pengguna: Pastikan pengguna mendapat maklumat terkini.
- Kurangkan Kekecewaan: Elakkan tanggapan bahawa aplikasi lambat.
- Tunjukkan Kemajuan: Paparkan bahawa sesuatu sedang berlaku di latar belakang.
Memperkenalkan `loading.js`
Penghala Aplikasi Next.js menyediakan konvensyen fail khas, loading.js, untuk mencipta antaramuka pengguna pemuatan secara automatik bagi sesuatu segmen laluan.
Apabila data sedang diperoleh untuk fail page.js atau layout.js, Next.js secara automatik memaparkan antaramuka pengguna yang ditakrifkan dalam adik-beradik atau leluhur loading.js yang paling hampir.
Mencipta Antaramuka Pengguna Pemuatan Mudah
Untuk mencipta antaramuka pengguna pemuatan, tambahkan fail loading.js sahaja di dalam folder segmen laluan. Fail itu hendaklah mengeksport komponen React lalai.
Komponen ini akan dipaparkan serta-merta apabila segmen sedang dimuatkan.
export default function Loading() {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>Loading...</h2>
<p>Please wait while we fetch the content.</p>
</div>
);
}Cara `loading.js` Berfungsi
Di sebalik tabir, loading.js berfungsi dengan React Suspense. Next.js membalut page.js yang berkaitan serta anak bersarangnya dalam Sempadan Suspense.
Apabila sebarang proses mendapatkan data dalam sempadan itu masih belum selesai, komponen loading.js dipaparkan sebagai sandaran.
Keadaan Pemuatan Bersarang
Anda boleh mempunyai beberapa fail loading.js pada aras berlainan dalam laluan anda. Contohnya, antaramuka pengguna pemuatan global dan satu lagi yang lebih khusus untuk sublaluan.
Next.js akan memaparkan leluhur terdekat loading.js bagi segmen yang sedang dimuatkan.
Mengendalikan Ralat Aplikasi
Sama seperti keadaan pemuatan, ralat ialah sebahagian daripada mana-mana aplikasi. Ralat yang tidak ditangkap boleh menyebabkan aplikasi anda terhenti, lalu menghasilkan pengalaman pengguna yang kurang baik.
Penghala Aplikasi Next.js menyediakan cara untuk mengendalikan ralat dengan baik dan memaparkan antaramuka pengguna ralat tersuai menggunakan error.js.
Memperkenalkan `error.js`
Konvensyen fail error.js membolehkan anda mentakrifkan antaramuka pengguna ralat yang secara automatik membalut segmen laluan dan anak-anaknya dalam Sempadan Ralat React.
Sempadan ini menangkap ralat yang berlaku semasa pemaparan, dalam pengendali peristiwa dan semasa mendapatkan data dalam skopnya.
Mencipta Antaramuka Pengguna Ralat Asas
Sama seperti loading.js, cipta fail error.js dalam segmen laluan. Fail ini mestilah Komponen Klien React (gunakan 'use client'; pada bahagian atas).
Fail ini menerima error (objek ralat) dan fungsi reset sebagai prop.
'use client';
import { useEffect } from 'react';
export default function Error({ error, reset }) {
useEffect(() => {
// Log the error to an error reporting service
console.error(error);
}, [error]);
return (
<div style={{ padding: '20px', textAlign: 'center', color: 'red' }}>
<h2>Something went wrong!</h2>
<button
onClick={() => reset()} // Attempt to re-render the segment
style={{ marginTop: '10px', padding: '8px 15px' }}
>
Try again
</button>
</div>
);
}Pemulihan Ralat dengan `reset()`
Fungsi reset() yang diberikan kepada komponen error.js anda amat penting. Apabila dipanggil, fungsi ini cuba memaparkan semula keseluruhan segmen yang menghasilkan ralat.
Ini membolehkan pengguna mencuba lagi tanpa berpindah dari halaman, dan berpotensi menyelesaikan masalah sementara.
Semakan Pantas tentang Fail Antaramuka Pengguna
Pernyataan manakah yang menerangkan tujuan utama loading.js dalam Penghala Aplikasi Next.js dengan tepat?
Ulang Kaji: Antaramuka Pengguna Pemuatan & Ralat
Dalam pelajaran ini, anda telah mempelajari cara meningkatkan pengalaman pengguna aplikasi Next.js dengan melaksanakan maklum balas visual untuk keadaan pemuatan dan ralat.
loading.js: Memaparkan antaramuka pengguna sementara semasa data sedang diperoleh menggunakan React Suspense.error.js: Menangkap ralat dalam segmen dan memaparkan antaramuka pengguna sandaran, yang membolehkan pengguna cuba memulihkan keadaan dengan fungsireset().
Konvensyen ini membantu menghasilkan aplikasi Next.js yang lebih kukuh dan mesra pengguna.
Pelajari TypeScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Soalan Lazim
Adakah pelajaran “UI Pemuatan & Ralat” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan), termasuk “UI Pemuatan & Ralat”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “UI Pemuatan & Ralat”?
Laksanakan keadaan pemuatan dengan `loading.js` dan kendalikan ralat secara baik menggunakan sempadan `error.js` dalam aplikasi anda. Anda berlatih Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan)?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “UI Pemuatan & Ralat” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) ini?
Ya. Setiap pelajaran Tindanan Penuh Next.js 15 (Penghala Aplikasi + Tindakan Pelayan) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Reka Letak dan Komponen Halaman
- Laluan Dinamik & Parameter
- UI Pemuatan & Ralat
- Kumpulan Laluan dan Susun Atur Bersarang