Klientkomponenter i NextJS-rammeverket
La oss nå omarbeide vår serverkomponent
til en klientkomponent. For å gjøre dette
skriver vi direktiven 'use client'
i starten av komponentfilen:
'use client';
export default function Test() {
return <h1>hello, user!</h1>;
}
Nå vil vi ha tilgang til tilstander,
opprettet via useState.
La oss for eksempel opprette en tilstand
og vise dens innhold i oppsettet:
'use client';
import { useState } from 'react';
export default function Test() {
let [name, setName] = useState('user');
return <h1>hello, {name}!</h1>;
}
Lag en klientkomponent med to inndatafelt og en knapp. La tall skrives inn i inndatafeltene. Ved trykk på knappen, vis summen av de innskrevne tallene i et avsnitt.
Fjern direktiven 'use client'.
Forsikre deg om at NextJS i dette tilfellet
vil gi en feil på grunn av at
man ikke kan bruke tilstander
innenfor serverkomponenter.
