Next.js Loading and Error States

Requirements

Create loading and error boundaries using App Router standards. Design a `loading.tsx` page displaying card skeletons and an `error.tsx` boundary containing retry controls.

Expected Output

A pair of React components that automatically wrap Next.js pages and handle unexpected crashes.

Hints & Tips

1Next.js Error components must be declared as Client Components ('use client').
2Ensure the error boundary accepts `error: Error` and `reset: () => void` props.
3Provide visually clean skeletons with CSS pulse animations (`animate-pulse`).

Senior Code Review Checklist

0 / 4 Checked

Common Architectural Mistakes

1Declaring error boundaries as Server Components, causing compilation crashes.
2Not testing the recovery reset function, leaving users stuck on error screens.
3Providing basic plain text blocks instead of pulsing skeletons for loading states.

Developer Solution

Click to toggle the recommended code solution

Architectural Explanation

This file exports a client error boundary receiving system error triggers and manual reset recovery bindings, ensuring components can recover gracefully without full-page reloads.

Code Snippet

tsx

// error.tsx
"use client";

import { useEffect } from "react";

export default function ErrorPage({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("Hydration Error logged:", error);
  }, [error]);

  return (
    <div class="p-8 border border-red-200 bg-red-50 rounded-2xl text-center space-y-4">
      <h2 class="text-red-800 font-bold">Something went wrong!</h2>
      <p class="text-xs text-red-650">{error.message}</p>
      <button onClick={() => reset()} class="bg-red-600 text-white px-4 py-2 rounded-xl text-xs font-bold">
        Try Again
      </button>
    </div>
  );
}

Explain in Interview

How to pitch this solution during technical interviews

I handle rendering states by placing loading.tsx and error.tsx files inside App Router folders. Next.js wraps routes in Suspense and Error Boundary zones. This isolates page crashes and displays loading skeletons during data fetches.

Loading content…

// error.tsx "use client"; import { useEffect } from "react"; export default function ErrorPage({ error, reset, }: { error: Error & { digest?: string }; reset: () => void; }) { useEffect(() => { console.error("Hydration Error logged:", error); }, [error]); return ( <div class="p-8 border border-red-200 bg-red-50 rounded-2xl text-center space-y-4"> <h2 class="text-red-800 font-bold">Something went wrong!</h2> <p class="text-xs text-red-650">{error.message}</p> <button onClick={() => reset()} class="bg-red-600 text-white px-4 py-2 rounded-xl text-xs font-bold"> Try Again </button> </div> ); }