Special Files

loading.js, error.js, and not-found.js define segment states for loading, errors, and missing data.

loading.js

• Shown while a segment is pending.
• Uses Suspense boundaries created around segments.
• Does not block the parent layout.

export default function Loading() {
  return <p>Loading...</p>;
}

error.js

• Renders on server or render errors within the segment.
• Receives error and reset; reset() retries the segment.

"use client";
export default function Error({ error, reset }) {
  return (
    <div>
      <p>Error occurred.</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

error.js is always a Client Component because it has interactivity.

not-found.js

• Triggered by notFound() or missing data.
• Defines segment-level 404 UI.

export default function NotFound() {
  return <h1>Not found</h1>;
}

Priority order

1. loading.js
2. error.js
3. not-found.js