Πλευρικές Συστατικές στο Πλαίσιο NextJS

Ας μετατρέψουμε τώρα τη διακομιστική μας συστατική σε πλευρική. Για να το κάνουμε αυτό, θα γράψουμε στην αρχή του αρχείου της συστατικής την οδηγία 'use client':

'use client';

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

Τώρα θα έχουμε πρόσβαση σε καταστάσεις, που δημιουργούνται μέσω του useState. Ας δημιουργήσουμε μια κατάσταση ως παράδειγμα και ας εμφανίσουμε τα περιεχόμενά της στη σήμανση:

'use client';

import { useState } from 'react';

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

Δημιουργήστε μια πλευρική συστατική με δύο πεδία εισαγωγής και ένα κουμπί. Αφήστε τα πεδία εισαγωγής να εισάγουν αριθμούς. Πατώντας το κουμπί, εμφανίστε σε μια παράγραφο το άθροισμα των αριθμών που εισήχθησαν.

Αφαιρέστε την οδηγία 'use client'. Βεβαιωθείτε ότι σε αυτήν την περίπτωση το NextJS θα εμφανίσει ένα σφάλμα λόγω του ότι δεν μπορούν να χρησιμοποιηθούν καταστάσεις μέσα σε διακομιστικές συστατικές.