NextJS හි කොටු සැකසුම්

ඔබ දන්නා පරිදි, බහාලුම /app ඇතුළත, ගොනුව /layout.jsx වෙබ් අඩවියේ ප්‍රධාන සැකිල්ල අඩංගු වේ.

අවශ්‍ය නම්, කෙසේ වෙතත්, ගිල්වූ බහාලුම් වල ඔබට ඔබගේම සැකිලි සෑදිය හැකිය. මෙම අවස්ථාවේදී, පිටු අන්තර්ගතය මුලින්ම ගිල්වූ සැකිල්ල තුළට ඇතුල් කරනු ලැබේ, ඉන්පසු ලැබෙන ප්‍රතිඵලය ප්‍රධාන සැකිල්ල තුළට ඇතුල් කරනු ලැබේ.

අපි ප්‍රායෝගිකව උත්සාහ කරමු. අපගේ ප්‍රධාන සැකිල්ල පහත ආකාරයෙන් පෙනිය යුතුය:

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

අපි තවත් එකක් සාදමු, ගිල්වූ සැකිල්ලක්, සියලු බහාලුම /users වල අන්තර්ගතය සඳහා:

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

ඔබට පෙනෙන පරිදි, මෙම සැකිල්ලේ අපි පිටුවේ මූලික ටැග් සඳහන් කරන්නේ නැත, ඒවා අපගේ ප්‍රධාන වෙබ් අඩවි සැකිල්ලේ දැනටමත් ඇති නිසා.

පරිශීලකයෙකු පෙන්වීම සඳහා අන්තර්ගතය සහිත ගොනුවක් ද සාදමු:

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 සියල්ල එකට එකතු කරනු ඇති අතර බ්‍රවුසරයේ අපට පහත අවසාන HTML කේතය ලැබෙනු ඇත:

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