Klientkomponenter i NextJS-frameworket
Lad os nu omskrive vores serverkomponent
til en klientkomponent. For at gøre dette
skriver vi direktiven 'use client'
i starten af komponentfilen:
'use client';
export default function Test() {
return <h1>hello, user!</h1>;
}
Nu vil vi få adgang til states,
oprettet via useState.
Lad os for eksempel oprette en state
og udskrive dens indhold i renderingen:
'use client';
import { useState } from 'react';
export default function Test() {
let [name, setName] = useState('user');
return <h1>hello, {name}!</h1>;
}
Lav en klientkomponent med to inputfelter og en knap. Lad der indtastes tal i inputfelterne. Ved klik på knappen, udskrives summen af de indtastede tal i et afsnit.
Fjern direktiven 'use client'.
Sikr dig, at NextJS i dette tilfælde
vil vise en fejl på grund af, at
det ikke er tilladt at bruge states
i serverkomponenter.
