NextJS တွင် Slot ၏ Default File

ယခင်သင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် info ဟုခေါ်သော dynamic slot တစ်ခုကိုပြုလုပ်ခဲ့သည်။

export default function RootLayout({children, info}) {
	return (
		<html lang="en">
			<body>
				<header>
					<div>
						{info}
					</div>
				</header>
				<main>
					{children}
				</main>
				<footer>
					footer
				</footer>
			</body>
		</html>
	);
}

သို့သော် ပြဿနာတစ်ခုရှိနေပါသည်။ ကျွန်ုပ်တို့၏ slot သည် လိပ်စာအမျိုးအစား နှစ်ခုအတွက်သာ အလုပ်လုပ်နေခြင်းဖြစ်သည်။ ထိုလိပ်စာများမှာ /users နှင့် /posts တို့ဖြစ်သည်။ အကယ်၍ address bar တွင် ကျွန်ုပ်တို့၏ slot အတွက် သတ်မှတ်မထားသော အခြား URL တစ်ခုကိုရိုက်ထည့်ပါက၊ NextJS သည် 404 error ကိုပြသပေးမည်ဖြစ်သည်။

ဤပြဿနာကိုဖြေရှင်းရန် slot ပါဝင်သော folder အတွင်း default.jsx ဟုခေါ်သော အထူးဖိုင်တစ်ခုကို ထည့်သွင်းရပါမည်။ ဤဖိုင်ထဲတွင် component တစ်ခုပါဝင်ရမည်။ ထို component ကို ကျွန်ုပ်တို့၏ slot အတွက် သတ်မှတ်မထားသော URL ကို address bar တွင်ရိုက်ထည့်သောအခါ ပြသပေးမည်ဖြစ်သည်။

ဆိုလိုသည်မှာ ကျွန်ုပ်တို့၏ကိစ္စတွင် အောက်ပါဖိုင်ဖွဲ့စည်းပုံအတိုင်းဖြစ်လာမည်။

/app/
- /@info/
  - default.jsx
  - users/
    - page.jsx
  - posts/
    - page.jsx

ကျွန်ုပ်တို့၏ slot အတွက် သတ်မှတ်မထားသော URL ကို address bar တွင်ရိုက်ထည့်သောအခါ dynamic slot က 404 error ကိုပြနေကြောင်း သေချာပါစေ။

404 error ပြဿနာကို ဖြေရှင်းပါ။