Next.js: Loading и error UI — пример кода

// app/dashboard/loading.tsx — shown instantly while the page's async work runs
export default function Loading() {
  return ;   // layout stays visible; only this area is a skeleton
}

// app/dashboard/error.tsx — MUST be a client component
'use client';
export default function Error({
  error, reset,
}: { error: Error & { digest?: string }; reset: () => void }) {
  return (
    
      Something broke.
      Try again  {/* re-renders the segment */}
    
  );
}

// app/not-found.tsx — rendered when notFound() is thrown, or for unmatched routes
export default function NotFound() {
  return 404 — no such page;
}

// For finer control, drop Suspense boundaries INSIDE the page for per-widget streaming:
import { Suspense } from 'react';
}>