When will you use this?

Use Route Handlers when a mobile app, webhook, or external client needs JSON from your server.

• Mobile apps and partner sites call your Next.js Route Handlers for JSON over HTTP.
• Webhook endpoints for payment providers live in app/api routes.

Real-world: Zoho-style SaaS dashboard

The B2B SaaS team building Zoho-style SaaS dashboard uses Loading and Error UI to apply Loading and Error UI when building billing, team settings, and analytics widgets. tenant admins never see the TypeScript files — they just get a fast, reliable billing, team settings, and analytics widgets.

Production-style code

// app/courses/[slug]/loading.tsx
export default function Loading() {
  return <div className="animate-pulse">Loading course...</div>;
}

// app/courses/[slug]/error.tsx
'use client';

export default function Error({
  error,
  reset
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div>
      <p>Could not load this course.</p>
      <button type="button" onClick={reset}>Try again</button>
    </div>
  );
}

What happens in production: In Zoho-style SaaS dashboard, getting Loading and Error UI right means tenant admins trust the billing, team settings, and analytics widgets every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// app/courses/[slug]/loading.tsx
export default function Loading() {
  return <div className="animate-pulse">Loading course...</div>;
}

// app/courses/[slug]/error.tsx
'use client';

export default function Error({
  error,
  reset
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div>
      <p>Could not load this course.</p>
      <button type="button" onClick={reset}>Try again</button>
    </div>
  );
}

Line-by-line walkthrough

How it works (big picture)

• loading.tsx is a Server Component shell shown during suspense.
• error.tsx must be a Client Component because it uses reset().

Do this on your computer

1. Add loading.tsx to a dynamic course route.
2. Add artificial delay in fetch to see the skeleton.
3. Add error.tsx and throw in fetch to test recovery.
4. Read the real-world section and name which part of LearnHub uses this topic.
5. Run the example locally with npm run dev and confirm the same behavior.
6. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Use npm run dev while editing Loading and Error UI — the page hot-reloads on save.

Remember

loading.tsx = route-level suspense fallback. error.tsx = catch and recover. Pair with not-found.tsx for 404 cases.

Common questions