ეს არის სპეციალური ფайლები App Router-ში, რომლებიც ავტომატურად უზრუნველყოფენ დატვირთვის და შეცდომის მდგომარეობას მარშრუტის სეგმენტისთვის — Next.js აკავშირებს მათ React Suspense-სთან და Error Boundaries-თან, ასე რომ თქვენ არ უნდა დაწეროთ ეს boilerplate კოდი.
() {
;
}
Next.js ავტომატურად ტრიალებს სეგმენტის page.tsx-ს <Suspense> საზღვარში ამით როგორც fallback. ასე რომ, სანამ ასინქრონული Server Component ელოდება მის მონაცემებს, მომხმარებელი დაუყოვნებლივ ხედავს 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, რომელიც ნებას აძლევს streaming-ს, და სეგმენტის სფეროში შეცდომის საზღვრებითა და retry-ით.
isLoading/error მდგომარეობის გადაცემის ნაცვლად კომპონენტების მეშვეობით, თქვენ გააფრთოვებთ loading.tsx და error.tsx და Next.js იკვებება სადრო, რაც წარმოშობს ელასტიკურ, რეაგირებაში უკეთ UX.