ਇਹ App Router ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਫ਼ਾਇਲਾਂ ਹਨ ਜੋ ਇੱਕ ਰੂਟ ਸੈਗਮੈਂਟ ਲਈ ਆਪਣੇ ਆਪ loading ਅਤੇ error states ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ — Next.js ਉਹਨਾਂ ਨੂੰ React Suspense ਅਤੇ Error Boundaries ਨਾਲ ਜੋੜਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਉਹ boilerplate ਲਿਖਣ ਦੀ ਲੋੜ ਨਾ ਪਵੇ।
() {
;
}
Next.js ਆਪਣੇ ਆਪ ਸੈਗਮੈਂਟ ਦੇ page.tsx ਨੂੰ <Suspense> ਸੀਮਾ ਦੇ ਵਿੱਚ ਇਸ ਨੂੰ fallback ਦੇ ਰੂਪ ਵਿੱਚ ਰੱਖਦਾ ਹੈ। ਇਸ ਲਈ ਜਦਕਿ ਇੱਕ async Server Component ਆਪਣਾ ਡਾਟਾ ਉਡੀਕਦਾ ਹੈ, ਉਪਭੋਗਤਾ ਤੁਰੰਤ loading.tsx UI ਦੇਖਦਾ ਹੈ — ਫਿਰ ਵਾਸਤਵਿਕ ਸਮਗਰੀ ਸਟ੍ਰੀਮ ਹੁੰਦੀ ਹੈ। ਕੋਈ ਮੈਨੁਅਲ loading-state ਪ੍ਰਬੰਧ ਨਹੀਂ।
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
ਇਹ ਫ਼ਾਇਲਾਂ ਤੁਹਾਨੂੰ ਪ੍ਰਤੀ ਰੂਟ ਮੁਫ਼ਤ ਵਿੱਚ robust loading ਅਤੇ error ਹ੍ਰੈਂਡਲਿੰਗ ਦਿੰਦੀਆਂ ਹਨ — Suspense-ਅਧਾਰਿਤ loading UI ਜੋ ਸਟ੍ਰੀਮਿੰਗ ਨੂੰ ਸਮਰਥ ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਸੈਗਮੈਂਟ-ਸਕੋਪ਼ ਕੀਤੇ error boundaries retry ਦੇ ਨਾਲ।
isLoading/error state ਨੂੰ ਕੰਪੋਨੈਂਟਸ ਦੁਆਰਾ ਥ੍ਰੇਡ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਇੱਕ loading.tsx ਅਤੇ error.tsx ਵਿੱਚ ਨੂੰ ਹੇਠ ਲਿਆ ਜਾਂ ਓ ਅਤੇ Next.js ਵਾਇਰਿੰਗ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ, ਇੱਕ ਮਜ਼ਬੂਤ, ਜਵਾਬਦੇਹ UX ਪੈਦਾ ਕਰਦਾ ਹੈ।