Klientské komponenty ve frameworku NextJS

Nyní přepracujme naši serverovou komponentu na klientskou. K tomu napišme na začátek souboru komponenty direktivu 'use client':

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

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

Nyní nám budou dostupné stavy, vytvářené pomocí useState. Vytvořme například stav a vypišme jeho obsah ve verstonání:

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>;
}

Задание 1

Vytvořte klientskou komponentu se dvěma vstupy a tlačítkem. Nechť se do vstupů zadávají čísla. Po stisknutí tlačítka vypište do odstavce součet zadaných čísel.

Задание 2

Odstraňte direktivu 'use client'. Přesvědčte se, že v tomto případě NextJS vypíše chybu z důvodu, že nelze používat stavy uvnitř serverových komponent.