Συστατικό για μενού στο NextJS

Στα επόμενα μαθήματα θα μελετήσουμε τις ειδικές δυνατότητες του NextJS για τη δημιουργία μενού site. Για αυτό θα χρειαστούμε ένα συστατικό με το μενού του site. Σε αυτό το μάθημα θα φτιάξουμε το πρότυπο αυτού του συστατικού, και τους συνδέσμους θα εισάγουμε στα επόμενα μαθήματα.

Το πρότυπο μας θα μοιάζει ως εξής:

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

Ας εισάγουμε αυτό το πρότυπο στην κύρια διάταξη του site:

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>
  );
}