0Pricing
Next.js 15 Fullstack Web Apps · Lesson

Loading and Error UI Conventions

Use the App Router file conventions loading.js, error.js, and not-found.js to build resilient, streamed routes with graceful fallbacks.

Why Loading and Error UI Matter

Advanced routing is not only about where a route lives but about what users see while it resolves or fails. The App Router gives you special files that wrap segments automatically.

  • loading.js renders an instant fallback while the segment streams.
  • error.js catches runtime errors in that segment.
  • not-found.js renders when notFound() is called.

The loading.js Convention

A loading.js file in a segment folder is automatically wrapped around page.js in a React Suspense boundary. While the server component awaits data, the loading UI shows instantly.

export default function Loading() {
  return <div className="spinner">Loading dashboard...</div>;
}

All lessons in this course

  1. Dynamic Routes and Catch-all Segments
  2. Nested Layouts and Route Groups
  3. Parallel and Intercepting Routes
  4. Loading and Error UI Conventions
← Back to Next.js 15 Fullstack Web Apps