YGNCode

မှတ်ချက်။ AI ပြောတိုင်းအမှန်မဟုတ်ပါဘူး၊ တခါတလေသူကအမှားတွေပါပြောတက်ပါတယ်။ ကိုယ်ပိုင်စဥ်းစားဆင်ခြင်ဆုံးဖြတ်ပါ။

Thiha Kyaw 18 Sep 2024, 4:54 am

NextJS မှာ Nested UI အတွက် /app directory ကိုသုံးပြီး နမူနာတစ်ခုတည်ဆောက်ပြပါ

NextJS မှာ Nested UI အတွက် /app directory သုံးပြီး နမူနာတည်ဆောက်ပြပါမယ်။ ဒီနမူနာမှာ header, sidebar နဲ့ main content ပါဝင်တဲ့ layout တစ်ခုကို တည်ဆောက်ပြပါမယ်။

ပထမဆုံး /app directory အောက်မှာ အောက်ပါ folder structure ကို တည်ဆောက်ပါ:

/app
  /dashboard
    /settings
      page.js
    page.js
  layout.js
  page.js

/app/layout.js ဖိုင်မှာ အဓိက layout ကို တည်ဆောက်ပါမယ်:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <h1>My App</h1>
        </header>
        <div className="content">
          <aside>
            <nav>
              <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/dashboard">Dashboard</a></li>
                <li><a href="/dashboard/settings">Settings</a></li>
              </ul>
            </nav>
          </aside>
          <main>{children}</main>
        </div>
      </body>
    </html>
  );
}

/app/page.js ဖိုင်မှာ Home page ကို တည်ဆောက်ပါမယ်:

export default function Home() {
  return <h2>Welcome to the Home Page</h2>;
}

/app/dashboard/page.js ဖိုင်မှာ Dashboard page ကို တည်ဆောက်ပါမယ်:

export default function Dashboard() {
  return <h2>Dashboard Page</h2>;
}

/app/dashboard/settings/page.js ဖိုင်မှာ Settings page ကို တည်ဆောက်ပါမယ်:

export default function Settings() {
  return <h2>Settings Page</h2>;
}

ဒီ structure နဲ့ code တွေက NextJS မှာ Nested UI တည်ဆောက်ဖို့ /app directory ကို အသုံးပြုထားတဲ့ နမူနာဖြစ်ပါတယ်။ layout.js ဖိုင်က အဓိက layout ကို သတ်မှတ်ပေးပြီး၊ ကျန်တဲ့ page components တွေက သက်ဆိုင်ရာ route တွေအတွက် content တွေကို ပြသပေးမှာ ဖြစ်ပါတယ်။

ပြန်လည်မျှဝေပါ... Facebook Twitter LinkedIn WhatsApp Telegram