Laad- en fout-UI
Implementeer laadstatussen met `loading.js` en handel fouten op elegante wijze af met `error.js`-grenzen in uw applicatie.
Laad- en fout-UI is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.
Waarom laadstatussen belangrijk zijn
Wanneer je Next.js-toepassing gegevens ophaalt, kan dat enige tijd duren. Zonder visuele feedback denken gebruikers misschien dat de app is vastgelopen of niet werkt.
- Betere gebruikerservaring: houd gebruikers op de hoogte.
- Minder frustratie: voorkom dat de toepassing traag lijkt.
- Voortgang aangeven: laat zien dat er op de achtergrond iets gebeurt.
Kennismaken met `loading.js`
Next.js App Router biedt een speciale bestandsconventie, loading.js, waarmee automatisch een laadinterface voor een route- segment wordt gemaakt.
Wanneer gegevens worden opgehaald voor een page.js- of layout.js-bestand, toont Next.js automatisch de interface die is gedefinieerd in het dichtstbijzijnde zusterelement of de dichtstbijzijnde voorouder met loading.js.
Een eenvoudige laadinterface maken
Voeg om een laadinterface te maken eenvoudig een loading.js-bestand toe aan de map van een routesegment. Het bestand moet een standaard React-component exporteren.
Deze component wordt onmiddellijk weergegeven terwijl het segment wordt geladen.
export default function Loading() {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>Loading...</h2>
<p>Please wait while we fetch the content.</p>
</div>
);
}Zo werkt `loading.js`
Onder de motorkap werkt loading.js samen met React Suspense. Next.js wikkelt de bijbehorende page.js en de geneste onderliggende elementen ervan in een Suspense-grens.
Wanneer het ophalen van gegevens binnen die grens nog bezig is, wordt de component loading.js als terugvalinterface weergegeven.
Geneste laadstatussen
Je kunt meerdere loading.js-bestanden op verschillende niveaus van je route hebben. Je kunt bijvoorbeeld een algemene laadinterface en een specifiekere interface voor een subroute gebruiken.
Next.js toont de dichtstbijzijnde voorouder met loading.js voor het segment dat momenteel wordt geladen.
Fouten in toepassingen afhandelen
Net als laadstatussen maken fouten deel uit van elke toepassing. Niet-afgevangen fouten kunnen je app laten crashen, wat leidt tot een slechte gebruikerservaring.
Next.js App Router biedt een manier om fouten netjes af te handelen en met error.js een aangepaste foutinterface weer te geven.
Kennismaken met `error.js`
Met de bestandsconventie error.js kun je een foutinterface definiëren die automatisch een routesegment en de onderliggende elementen ervan omwikkelt met een React-foutgrens.
Deze grens vangt fouten op die tijdens het renderen, in gebeurtenisafhandelingsfuncties en bij het ophalen van gegevens binnen het bereik ervan optreden.
Een eenvoudige foutinterface maken
Maak, net als bij loading.js, een error.js-bestand in een routesegment. Het bestand moet een React Client Component zijn (gebruik bovenaan 'use client';).
De component ontvangt error (het foutobject) en een functie reset als props.
'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>
);
}Foutherstel met `reset()`
De functie reset() die aan je error.js-component wordt doorgegeven, is essentieel. Wanneer je deze aanroept, probeert de functie het volledige segment waarin de fout is opgetreden opnieuw te renderen.
Hierdoor kunnen gebruikers het opnieuw proberen zonder weg te navigeren, waardoor tijdelijke problemen mogelijk worden opgelost.
Snelle controle van interfacebestanden
Welke bewering beschrijft het primaire doel van loading.js in Next.js App Router correct?
Herhaling: laad- en foutinterface
In deze les heb je geleerd hoe je de gebruikerservaring van je Next.js-toepassing verbetert door visuele feedback voor laad- en foutstatussen te implementeren.
loading.js: toont tijdelijk een interface terwijl gegevens worden opgehaald, met React Suspense.error.js: vangt fouten in een segment op en toont een terugvalinterface, zodat gebruikers herstel kunnen proberen met de functiereset().
Deze conventies helpen je robuustere en gebruiksvriendelijkere Next.js-toepassingen te maken.
Leer TypeScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 22
- Lessen
- 88
Veelgestelde vragen
Is de les “Laad- en fout-UI” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “Laad- en fout-UI”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.
Wat leer ik in “Laad- en fout-UI”?
Implementeer laadstatussen met `loading.js` en handel fouten op elegante wijze af met `error.js`-grenzen in uw applicatie. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?
Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Laad- en fout-UI”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?
Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Layouts en paginacomponenten
- Dynamische routes en parameters
- Laad- en fout-UI
- Routegroepen en geneste layouts