இவை App Router இல் சிறப்பு கோப்புகள் ஆகும், அவை தானாகவே ஒரு பாதை பிரிவுக்கான ஏற்றல் மற்றும் பிழை நிலைகளை வழங்குகின்றன — Next.js அவற்றை React Suspense மற்றும் Error Boundaries உடன் இணைக்கிறது, எனவே நீங்கள் அந்த நகல் குறியீட்டை எழுத வேண்டிய இல்லை.
() {
;
}
Next.js தானாகவே பிரிவின் page.tsx ஐ இந்த fallback உடன் <Suspense> எல்லைக்குள் செய்கிறது. ஒரு 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 ஐ உருவாக்குகிறது.