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

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

src/app/test/page.jsx'use client';

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

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

src/app/test/page.jsx'use client';

import { useState } from 'react';

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