NextJS හි මෙනු සංරචකය

පහත පාඩම්වලදී, අපි වෙබ් අඩවි මෙනු නිර්මාණය කිරීම සඳහා NextJS හි විශේෂ හැකියාවන් අධ්‍යයනය කරන්නෙමු. මේ සඳහා අපට වෙබ් අඩවි මෙනුවක් සහිත සංරචකයක් අවශ්‍ය වනු ඇත. මෙම පාඩමේදී අපි මෙම සංරචකයේ හිස් සැකිල්ලක් සාදා, සබැඳි ඇතුලත් කිරීම පහත පාඩම්වලදී කරන්නෙමු.

අපගේ හිස් සැකිල්ල පහත දැක්වෙන ආකාරයට පෙනෙනු ඇත:

/src/comps/menu/menu.jsxexport default function Menu() {
  return <>
    ...
  </>;
}

මෙම හිස් සැකිල්ල අපි වෙබ් අඩවියේ ප්‍රධාන පිරිසැලසුමට ඇතුලත් කරමු:

app/layout.jsximport Menu from '@/comps/menu/menu.jsx';

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