Σερβερικά Κομμάτια στο Πλαίσιο NextJS

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

export default function Test() {
	return <h1>hello, user!</h1>;
}

Όπως έχει ήδη αναφερθεί, από προεπιλογή στο NextJS όλα τα κομμάτια είναι σερβερικά. Ταυτόχρονα, έχουμε πρόσβαση σε όλες τις δυνατότητες της γλώσσας JSX, με εξαίρεση την εργασία με states και άλλα παρόμοια hooks.

Για παράδειγμα, ας φτιάξουμε μια μεταβλητή και ας την εμφανίσουμε στο markup:

export default function Test() {
	let name = 'user';
	return <h1>hello, {name}!</h1>;
}

Δίνεται ένας πίνακας προϊόντων:

let prods = [
	'prod1',
	'prod2',
	'prod3',
];

Χρησιμοποιώντας βρόχο, εμφανίστε αυτά τα προϊόντα ως μια λίστα ul μέσα στο σερβερικό σας κομμάτι.