এগুলি App Router-এ বিশেষ ফাইল যা একটি রুট সেগমেন্টের জন্য স্বয়ংক্রিয়ভাবে লোডিং এবং ত্রুটি অবস্থা প্রদান করে — Next.js সেগুলিকে React Suspense এবং Error Boundaries-এর সাথে সংযুক্ত করে যাতে আপনাকে সেই বয়লারপ্লেট কোড লিখতে না হয়।
() {
;
}
Next.js স্বয়ংক্রিয়ভাবে সেগমেন্টের page.tsx-কে একটি <Suspense> সীমানায় মোড়ায় এটিকে fallback হিসেবে ব্যবহার করে। তাই একটি async 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 যা স্ট্রিমিং সক্ষম করে এবং সেগমেন্ট-স্কোপড ত্রুটি সীমানা পুনঃপ্রচেষ্টা সহ।
কম্পোনেন্টগুলির মাধ্যমে isLoading/error স্টেট থ্রেড করার পরিবর্তে, আপনি একটি loading.tsx এবং error.tsx ড্রপ করেন এবং Next.js সংযোগ পরিচালনা করে, একটি স্থিতিস্থাপক, প্রতিক্রিয়াশীল UX তৈরি করে।