NextJS တွင် Nested Layouts များ

သင်သိထားသည့်အတိုင်း၊ /app ဖိုလ်ဒါအတွင်းရှိ /layout.jsx ဖိုင်တွင် ဝဘ်ဆိုက်၏ အဓိက layout တည်ရှိပါသည်။

လိုအပ်ပါက၊ nested folders များအတွင်းတွင်လည်း ကိုယ်ပိုင် layouts များ ဖန်တီးနိုင်ပါသည်။ ထိုသို့ဆိုလျှင် စာမျက်နှာ၏ content သည် ပထမဆုံး nested layout အတွင်းသို့ ထည့်သွင်းခံရမည်ဖြစ်ပြီး ရရှိလာသောရလဒ်ကို အဓိက layout အတွင်းသို့ ထပ်မံထည့်သွင်းပေးမည်ဖြစ်သည်။

လက်တွေ့စမ်းကြည့်ကြပါစို့။ ကျွန်ုပ်တို့၏ အဓိက layout သည် အောက်ပါပုံစံရှိသည်ဟု ယူဆပါစို့။

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          header
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

/users ဖိုလ်ဒါမှ စာမျက်နှာအားလုံးအတွက် နောက်ထပ် nested layout တစ်ခု ပြုလုပ်ကြပါစို့။

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <>
      <div className="info">
        message for all users
      </div>
      <div className="content">
        {children}
      </div>
    </>
  );
}

သင်မြင်သည့်အတိုင်း၊ ဤ layout တွင် ကျွန်ုပ်တို့သည် စာမျက်နှာ၏အခြေခံ tags များကို ထည့်သွင်းဖော်ပြထားခြင်းမရှိပါ။ အဘယ်ကြောင့်ဆိုသော် ၎င်းတို့သည် ဝဘ်ဆိုက်၏အဓိက layout တွင်ရှိပြီးဖြစ်သောကြောင့်ဖြစ်သည်။

အသုံးပြုသူကို ပြသရန် content ပါဝင်သော ဖိုင်တစ်ခုလည်း ပြုလုပ်ကြပါစို့။

src/app/users/show/page.jsxexport default function User() {
  return <>
    <h1>User</h1>
    <p>
      user description
    </p>
  </>;
}

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

• /app/layout.jsx/users/layout.jsx/show/page.jsx

ယခု၊ သက်ဆိုင်ရာ URL သို့ဝင်ရောက်ပါက NextJS သည် အရာအားလုံးကို အတူတကွစုစည်းပေးပြီး browser တွင် ကျွန်ုပ်တို့သည် အောက်ပါ HTML code ကို ရရှိပါမည်။

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        message for all users
      </div>
      <div class="content">
        <h1>User</h1>
        <p>
          user description
        </p>
      </div>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>