Μέρη ιστοτόπου σε components στο NextJS

Στο προηγούμενο μάθημα γράφαμε το κείμενο των μερών του ιστοτόπου απευθείας στο αρχείο της διάταξης:

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

Αυτό, ωστόσο, μπορεί να είναι μη βολικό στην περίπτωση που τα μέρη του ιστοτόπου περιέχουν πολύ κώδικα και κείμενο. Γι' αυτό συνήθως τα μέρη του ιστοτόπου βγάζονται σε ξεχωριστά αρχεία components.

Ας βγάλουμε για παράδειγμα το header του ιστοτόπου σε ξεχωριστό component. Ας φτιάξουμε το αντίστοιχο αρχείο:

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

Εισάγουμε το component μας στο αρχείο της διάταξης:

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

export default function RootLayout({children}) {
  
}

Ας εμφανίσουμε το κείμενο του component μας χρησιμοποιώντας την ετικέτα με το όνομά του:

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