Komponen Klien dalam Framework NextJS
Sekarang mari kita ubah suai komponen
server kami kepada komponen klien. Untuk
melakukannya, tulis arahan 'use client'
pada permulaan fail komponen:
src/app/test/page.jsx'use client';
export default function Test() {
return <h1>hello, user!</h1>;
}
Sekarang keadaan (state) yang dibuat
melalui useState akan tersedia
untuk kita. Mari kita buat keadaan
sebagai contoh dan paparkan kandungannya
dalam markup:
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
Buat komponen klien dengan dua input dan satu butang. Biarkan nombor dimasukkan ke dalam input. Apabila butang ditekan, paparkan hasil tambah nombor yang dimasukkan dalam perenggan.
Задание 2
Buang arahan 'use client'.
Pastikan dalam kes ini NextJS
akan memaparkan ralat kerana
tidak boleh menggunakan keadaan
dalam komponen server.