Εισαγωγή Στοιχείων στο NextJS

Μπορούμε να εισάγουμε όχι μόνο αρχεία με δεδομένα, αλλά και στοιχεία, παρόμοια με τον τρόπο που έχουμε συνηθίσει να δουλεύουμε στο κανονικό React. Ας δούμε πώς λειτουργεί αυτό.

Για να ξεκινήσουμε, ας θέσουμε κάποιες συμβάσεις. Όπως ήδη γνωρίζετε, στον φάκελο src/app τοποθετούνται οι σελίδες του site. Ας τοποθετήσουμε τα θυγατρικά στοιχεία στον φάκελο src/comp.

Ας συνδέσουμε τώρα ένα θυγατρικό στοιχείο σε κάποια σελίδα. Ας υποθέσουμε ότι έχουμε μια τέτοια σελίδα:

src/app/test/page.jsxexport default function Test() {
  return <>
    <h1>Test</h1>
  </>;
}

Ας υποθέσουμε ότι έχουμε το ακόλουθο θυγατρικό στοιχείο:

src/comp/child/child.jsxexport default function Child() {
  return <p>
    child
  </p>;
}

Ας εισάγουμε το θυγατρικό μας στοιχείο στη σελίδα μας:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

export default function Test() {
  return <>
    <h1>Test</h1>
  </>;
}

Ας εκτελέσουμε την εισαγωγή του εισαγόμενου στοιχείου. Για αυτό χρησιμοποιούμε την ετικέτα με το όνομα της μεταβλητής του στοιχείου:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

export default function Test() {
  return <>
    <h1>Test</h1>
    <Child />
  </>;
}