Komponenty klienckie w frameworku NextJS
Teraz przeróbmy nasz komponent serwerowy
na kliencki. W tym celu
wpiszmy na początku pliku komponentu
direktywę 'use client':
'use client';
export default function Test() {
return <h1>hello, user!</h1>;
}
Teraz staną się dla nas dostępne stany,
tworzone za pomocą useState.
Dla przykładu stwórzmy stan
i wyświetlmy jego zawartość w wersce:
'use client';
import { useState } from 'react';
export default function Test() {
let [name, setName] = useState('user');
return <h1>hello, {name}!</h1>;
}
Stwórz komponent kliencki z dwoma polami input i przyciskiem. Niech w polach input wprowadzane są liczby. Po naciśnięciu przycisku wyświetl w akapicie sumę wprowadzonych liczb.
Usuń dyrektywę 'use client'.
Upewnij się, że w tym przypadku NextJS
wyświetli błąd z powodu tego,
że nie można używać stanów
wewnątrz komponentów serwerowych.
