Lade- und Fehler-UI
Implementieren Sie Ladezustände mit `loading.js` und behandeln Sie Fehler mithilfe von `error.js`-Boundary-Komponenten in Ihrer Anwendung auf angemessene Weise.
Lade- und Fehler-UI ist eine kostenlose Next.js 15 Fullstack (App Router + Server Actions)-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack (App Router + Server Actions)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Why Loading States Matter
When your Next.js application fetches data, it can take some time. Without any visual feedback, users might think the app is frozen or broken.
- Improve User Experience: Keep users informed.
- Reduce Frustration: Prevent perceived slowness.
- Indicate Progress: Show that something is happening in the background.
Introducing `loading.js`
Next.js App Router provides a special file convention, loading.js, to automatically create a loading UI for a route segment.
When data is being fetched for a page.js or layout.js file, Next.js automatically displays the UI defined in its nearest loading.js sibling or ancestor.
Creating a Simple Loading UI
To create a loading UI, simply add a loading.js file inside a route segment folder. It should export a default React component.
This component will be rendered instantly when the segment is loading.
export default function Loading() {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>Loading...</h2>
<p>Please wait while we fetch the content.</p>
</div>
);
}How `loading.js` Works
Under the hood, loading.js works with React Suspense. Next.js wraps the corresponding page.js and its nested children in a Suspense Boundary.
When any data fetching inside that boundary is pending, the loading.js component is shown as a fallback.
Nested Loading States
You can have multiple loading.js files at different levels of your route. For example, a global loading UI and a more specific one for a sub-route.
Next.js will show the closest ancestor loading.js for the segment that is currently loading.
Handling Application Errors
Just like loading states, errors are a part of any application. Uncaught errors can crash your app, leading to a poor user experience.
Next.js App Router provides a way to gracefully handle errors and display a custom error UI using error.js.
Introducing `error.js`
The error.js file convention allows you to define an error UI that automatically wraps a route segment and its children in a React Error Boundary.
This boundary catches errors that occur during rendering, in event handlers, and in data fetching within its scope.
Creating a Basic Error UI
Similar to loading.js, create an error.js file in a route segment. It must be a React Client Component (use 'use client'; at the top).
It receives error (the error object) and a reset function as 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>
);
}Error Recovery with `reset()`
The reset() function provided to your error.js component is crucial. When called, it attempts to re-render the entire segment that threw the error.
This allows users to try again without navigating away, potentially resolving transient issues.
Quick Check on UI Files
Which statement accurately describes the primary purpose of loading.js in Next.js App Router?
Recap: Loading & Error UI
In this lesson, you learned how to enhance your Next.js application's user experience by implementing visual feedback for loading and error states.
loading.js: Displays a temporary UI while data is being fetched, using React Suspense.error.js: Catches errors in a segment and displays a fallback UI, allowing users to attempt recovery with thereset()function.
These conventions help create more robust and user-friendly Next.js applications.
Lerne TypeScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 22
- Lektionen
- 88
Häufig gestellte Fragen
Ist die Lektion „Lade- und Fehler-UI“ kostenlos?
Ja — der vollständige Text von „Lade- und Fehler-UI“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack (App Router + Server Actions)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Lade- und Fehler-UI“?
Implementieren Sie Ladezustände mit `loading.js` und behandeln Sie Fehler mithilfe von `error.js`-Boundary-Komponenten in Ihrer Anwendung auf angemessene Weise. Du übst Next.js 15 Fullstack (App Router + Server Actions) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Next.js 15 Fullstack (App Router + Server Actions) zu starten?
Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack (App Router + Server Actions) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Lade- und Fehler-UI“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Next.js 15 Fullstack (App Router + Server Actions)-Lektion Code schreiben und ausführen?
Ja. Jede Next.js 15 Fullstack (App Router + Server Actions)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Layouts und Seitenkomponenten
- Dynamische Routen und Parameter
- Lade- und Fehler-UI
- Routengruppen und verschachtelte Layouts