Next.js - Web development basic Series: Loading & Error UI

Published: 18 August 2026
on channel: Web Development Tutorials

A loading.tsx file gives a real page an automatic loading state, and error.tsx catches genuine crashes, both with zero extra wiring. In this video you'll add both to a real slow-loading page.

Code walkthrough (jsx):
// app/dashboard/loading.tsx
export default function Loading() {
return ‹p›Loading dashboard...‹/p›;
}
// app/dashboard/error.tsx
"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.tsx MUST be a Client Component
// (Next.js requires "use client" here)

What it looks like: ❌ Blank white screen while dashboard's data fetch is in flight, then a crash shows nothing → ✅ "Loading dashboard..." appears automatically, and a real crash shows a recovery button

Try it yourself: Add a real loading.tsx and error.tsx to one route in your project.

#nextjs #next.js #react #webdev #jsx #coding #javascript #tutorial

On this page of the site you can watch the video online Next.js - Web development basic Series: Loading & Error UI with a duration of hours minute second in good quality, which was uploaded by the user Web Development Tutorials 18 August 2026, share the link with friends and acquaintances, this video has already been watched No times on youtube and it was liked by 0 viewers. Enjoy your viewing!

44,835

465