Next.js

Client-side State di Next.js

Penjelasan

Untuk state interaktif di sisi browser (mis. form input, toggle, counter), Next.js memakai hook React biasa (useState, useReducer) — TAPI komponennya WAJIB ditandai 'use client' terlebih dahulu, karena state hanya bermakna di browser, bukan saat render di server.

Contoh Konsep

'use client';

import { useState } from 'react';

export default function FormPencarian() {
    const [kataKunci, setKataKunci] = useState('');

    return (
        <div>
            <input
                value={kataKunci}
                onChange={(e) => setKataKunci(e.target.value)}
            />
            <p>Mencari: {kataKunci}</p>
        </div>
    );
}

Praktikum

Buat Client Component ToggleFilter dengan useState boolean tampilkanAktifSaja. Buat checkbox yang terikat ke state itu, dan tampilkan teks "Menampilkan semua" atau "Menampilkan yang aktif saja" sesuai nilainya.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Pola umum di Next.js: Server Component (page.js) fetch data dan mengirimkannya sebagai props ke Client Component kecil yang butuh interaktivitas — bukan menjadikan SELURUH halaman Client Component hanya karena satu tombol kecil butuh useState.

← Kembali Image Optimization dengan next/image Lanjutkan → Fetching Data di Client Component