Next.js 15 Fullstack Web Apps · Leçon

Conventions d’interface de chargement et d’erreur

Utilisez les conventions de fichiers de l’App Router, loading.js, error.js et not-found.js, pour créer des routes robustes diffusées progressivement et dotées de solutions de repli élégantes.

Conventions d’interface de chargement et d’erreur est une leçon Next.js 15 Fullstack Web Apps gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack Web Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Conventions d’interface de chargement et d’erreur » est-elle gratuite ?

Oui — le texte complet de « Conventions d’interface de chargement et d’erreur » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack Web Apps, passe à CoddyKit PRO. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Conventions d’interface de chargement et d’erreur » ?

Utilisez les conventions de fichiers de l’App Router, loading.js, error.js et not-found.js, pour créer des routes robustes diffusées progressivement et dotées de solutions de repli élégantes. Tu pratiques Next.js 15 Fullstack Web Apps avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack Web Apps ?

Aucune expérience préalable n'est requise. Next.js 15 Fullstack Web Apps sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Conventions d’interface de chargement et d’erreur » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack Web Apps ?

Oui. Chaque leçon Next.js 15 Fullstack Web Apps inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Routes dynamiques et segments attrape-tout
Mises en page imbriquées et groupes de routes
Routes parallèles et interceptrices
Conventions d’interface de chargement et d’erreur

← Retour à Next.js 15 Fullstack Web Apps