આ App Router માં વિશેષ ફાઇલો છે જે રૂટ સેગમેન્ટ માટે આપોઆપ લોડિંગ અને ભૂલ સ્થિતિ પ્રદાન કરે છે — Next.js તેમને React Suspense અને Error Boundaries સાથે જોડે છે જેથી તમે આ બોઇલરપ્લેટ લખવું ન પડે.
() {
;
}
Next.js આપોઆપ સેગમેન્ટની page.tsx ને <Suspense> બાઉન્ડરી માં આ ફોલબેક તરીકે લપેટે છે. તેથી જ્યારે એસિંક સર્વર કમ્પોનેન્ટ તેના ડેટાની રાહ જોઈ રહ્યું હોય, ત્યારે વપરાશકર્તા તરત જ loading.tsx UI જુએ છે — પછી વાસ્તવિક સામગ્રી સ્ટ્રીમ થાય છે. કોઇ મેનુઅલ લોડિંગ-સ્થિતિ વ્યવસ્થાપન નથી.
User navigates → loading.tsx shows INSTANTLY → data resolves → page replaces it
"use client"; // error components MUST be Client Components
export default function Error({
error,
reset,
}: {
error: Error;
reset: () => void; // retry: re-renders the segment
}) {
return (
<div>
<p>Something went wrong: {error.message}</p>
<button onClick={reset}>Try again</button>
</div>
);
}
જો પૃષ્ઠ (અથવા તેની ડેટા ફેચિંગ) ભૂલ ફેંકે, તો Next.js તેને આ Error Boundary દ્વારા પકડે છે અને error.tsx સંપૂર્ણ એપ્લીકેશન ક્રેશ કરવાની જગાએ રેન્ડર કરે છે. reset() ફંક્શન વપરાશકર્તાને સંપૂર્ણ રીલોડ વિના ફરી પ્રયાસ કરવા દેય છે. ભૂલો સેગમેન્ટમાં સમાયેલ છે — લેયાઉટ અને બાકી એપ્લીકેશન અક્ષત રહે છે.
loading.tsx → Suspense fallback (loading state)
error.tsx → error boundary (must be "use client")
not-found.tsx → 404 UI (triggered by notFound())
global-error.tsx → catches errors in the root layout itself
આ ફાઇલો તમને પ્રૌટ મુક્તમાં વિશ્વસનીય લોડિંગ અને ભૂલ હેન્ડલિંગ આપે છે — Suspense-આધારિત લોડિંગ UI જે સ્ટ્રીમિંગ સક્ષમ કરે છે, અને ફરીથી પ્રયાસ સાથે સેગમેન્ટ-સ્કોપ્ડ error boundaries.
કમ્પોનેન્ટ્સ દ્વારા isLoading/error સ્થિતિ થ્રેડ કરવાની બદલે, તમે loading.tsx અને error.tsx મધ્યે છોડો અને Next.js વાયરિંગ હેન્ડલ કરે છે, એક સુદૃઢ, પ્રતિક્રિયાશીલ UX ઉત્પાદન કરે છે.