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

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

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

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

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

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

export default function Child() {
	return <p>
		child
	</p>;
}

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

import Child from '@/comp/child/child.jsx';

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

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

import Child from '@/comp/child/child.jsx';

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

Δημιουργήστε πολλά θυγατρικά στοιχεία. Εισάγετέ τα στις σελίδες σας.