NextJS හි සංරචකවල වෙබ් අඩවි කොටස්

පෙර පාඩමේදී අපි වෙබ් අඩවියේ කොටස්වල පෙළ අයිතම පිරිසැලසුම් ගොනුවේම සෘජුව ලියා ඇත:

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

කෙසේ වෙතත්, මෙය අපහසු විය හැකිය වෙබ් අඩවි කොටස් විශාල ප්‍රමාණයක් අඩංගු වන විට කේතය සහ පෙළ. එබැවින් සාමාන්‍යයෙන් වෙබ් අඩවි කොටස් වෙනම ගොනු වලට ගෙන යන්න සංරචක.

උදාහරණයක් ලෙස, අපි ශීර්ෂකය ඉවත් කරමු වෙනම සංරචකයකට වෙබ් අඩවිය. අපි අදාළ ගොනුව සාදමු:

comp/header/header.jsxexport default function Header() {
  return <>
    header
  </>;
}

පිරිසැලසුම් ගොනුවට අපගේ සංරචකය ආයාත කරන්න:

app/layout.jsximport Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
  
}

අපගේ සංරචකයේ පෙළ ප්‍රතිදානය කරමු එහි නම සමඟ ටැගය භාවිතා කරමින්:

app/layout.jsximport Header from '@/comp/header/header.jsx';

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