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:

'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:

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('user');
	return <h1>hello, {name}!</h1>;
}

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.

Buang arahan 'use client'. Pastikan dalam kes ini NextJS akan memaparkan ralat kerana tidak boleh menggunakan keadaan dalam komponen server.