Komponen Klien dalam Framework NextJS
Sekarang mari kita ubah komponen server kita
menjadi komponen klien. Untuk melakukan ini,
tuliskan direktif 'use client'
di awal file komponen:
'use client';
export default function Test() {
return <h1>hello, user!</h1>;
}
Sekarang state akan menjadi tersedia untuk kita,
dibuat melalui useState.
Mari kita buat state sebagai contoh
dan tampilkan kontennya dalam markup:
'use client';
import { useState } from 'react';
export default function Test() {
let [name, setName] = useState('user');
return <h1>hello, {name}!</h1>;
}
Buatlah komponen klien dengan dua input dan sebuah tombol. Biarkan angka dimasukkan ke dalam input. Saat tombol ditekan, tampilkan jumlah angka yang dimasukkan dalam sebuah paragraf.
Hapus direktif 'use client'.
Pastikan bahwa dalam hal ini NextJS
akan memberikan error karena
tidak dapat menggunakan state
di dalam komponen server.
