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.

Loading and Error UI Conventions is a free Next.js 15 Fullstack Web Apps lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack Web Apps learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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>;
}

Skeletons Beat Spinners

For perceived performance, render a skeleton that mirrors the final layout instead of a generic spinner. It reduces layout shift and feels faster.

export default function Loading() {
  return (
    <ul>
      {Array.from({ length: 5 }).map((_, i) => (
        <li key={i} className="skeleton-row" />
      ))}
    </ul>
  );
}

Streaming with Suspense

Because loading.js is just Suspense under the hood, the rest of the layout renders immediately while only the slow segment streams in. You can also nest your own Suspense boundaries inside a page for finer control.

import { Suspense } from 'react';

export default function Page() {
  return (
    <section>
      <h1>Reports</h1>
      <Suspense fallback={<p>Loading chart...</p>}>
        <SlowChart />
      </Suspense>
    </section>
  );
}

The error.js Convention

error.js must be a Client Component. It receives the thrown error and a reset function to retry rendering the segment.

'use client';

export default function Error({ error, reset }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

Error Boundaries Are Scoped

An error.js catches errors in its segment and its children, but not in the layout at the same level. To catch layout errors, place the error file one level up.

Errors bubble up to the nearest parent boundary.
The root layout cannot be caught by a sibling error file.

global-error.js for the Root

To catch errors in the root layout itself, add global-error.js. It replaces the entire document, so it must render its own <html> and <body> tags.

'use client';

export default function GlobalError({ error, reset }) {
  return (
    <html>
      <body>
        <h2>App crashed</h2>
        <button onClick={() => reset()}>Reload</button>
      </body>
    </html>
  );
}

Triggering not-found.js

Call notFound() from next/navigation inside a server component to render the nearest not-found.js and send a 404 status.

import { notFound } from 'next/navigation';

export default async function Page({ params }) {
  const post = await getPost(params.id);
  if (!post) notFound();
  return <article>{post.title}</article>;
}

Custom not-found.js UI

Place not-found.js in any segment to override the default 404 for that part of the route tree. A root-level one acts as the global 404 page.

import Link from 'next/link';

export default function NotFound() {
  return (
    <div>
      <h2>Post not found</h2>
      <Link href="/blog">Back to blog</Link>
    </div>
  );
}

Combining the Conventions

A robust segment folder often contains all four files working together:

page.js — the content
loading.js — streamed fallback
error.js — runtime failure recovery
not-found.js — missing resource

Each is wired up automatically by the App Router with no manual provider setup.

Logging Errors in Production

Use a useEffect inside error.js to report errors to your monitoring service while still showing recovery UI to the user.

'use client';
import { useEffect } from 'react';

export default function Error({ error, reset }) {
  useEffect(() => {
    reportToSentry(error);
  }, [error]);
  return <button onClick={reset}>Retry</button>;
}

Quick Check

Which statement about error.js in the App Router is correct?

Recap

You learned the App Router's resilience conventions:

loading.js wraps segments in Suspense for instant streamed fallbacks.
error.js (Client Component) recovers from runtime errors with reset.
global-error.js catches root-layout failures.
not-found.js renders when notFound() is called.

Together they make advanced routes graceful under load and failure.

Frequently asked questions

Is the “Loading and Error UI Conventions” lesson free?

Yes — the full text of “Loading and Error UI Conventions” is free to read here on the web, and the Next.js 15 Fullstack Web Apps course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack Web Apps course, upgrade to CoddyKit PRO.

What will I learn in “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. You practise Next.js 15 Fullstack Web Apps with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Next.js 15 Fullstack Web Apps?

No prior experience is required. Next.js 15 Fullstack Web Apps on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Loading and Error UI Conventions” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Next.js 15 Fullstack Web Apps lesson?

Yes. Every Next.js 15 Fullstack Web Apps lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Next.js 15 Fullstack Web Apps