Server, client and data · Lesson 7 of 16
loading, error and not-found
Special files for loading and error states, and streaming.
9 minutes1 games
Next.js turns Suspense and error boundaries into simple files inside any folder:
loading.tsx: shown instantly while the folder's page loads its data.error.tsx: shown if the page throws, with a retry button.not-found.tsx: shown when you callnotFound().
- app/courses/
- layout.tsx
- loading.tsx → <Suspense fallback>
- error.tsx → <ErrorBoundary> ("use client")
- not-found.tsx → notFound()
- page.tsx
Next.js wraps page.tsx in these boundaries automatically, and the layout stays visible.
TypeScript
// app/courses/loading.tsx
export default function Loading() {
return <div className="animate-pulse">Loading courses…</div>
}
// app/courses/error.tsx: must be a Client Component
"use client"
export default function CoursesError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
return (
<div>
<p>Couldn't load the courses.</p>
<button onClick={() => reset()}>Try again</button>
</div>
)
}Streaming with Suspense
TypeScript
// The header shows immediately; the slow reviews stream in when ready
import { Suspense } from "react"
export default function CoursePage() {
return (
<main>
<CourseHeader /> {/* fast */}
<Suspense fallback={<p>Loading reviews…</p>}>
<Reviews /> {/* slow async Server Component */}
</Suspense>
</main>
)
}Order the lines
Order what the user sees opening a page with loading.tsx and Suspense around the reviews.
- Click the lines in the right order
Learn more from
Played 0 of 1 games
Sign in to save your progress and earn XP.