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:

src/app/test/page.jsx'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:

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

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.

Задание 2

Hapus direktif 'use client'. Pastikan bahwa dalam hal ini NextJS akan memberikan error karena tidak dapat menggunakan state di dalam komponen server.