'use client' Directive

Secara default, Next.js memproses semua komponen di server untuk menghemat ukuran file yang dikirim ke browser. Namun, server tidak bisa bereaksi terhadap interaksi pengguna (klik mouse, ketikan keyboard). Jika kamu ingin membuat komponen yang hidup dan interaktif (menggunakan onClick, useState, atau useEffect), kamu wajib menambahkan 'use client'; di baris paling atas file. Ini memberitahu Next.js: 'Komponen ini harus dijalankan di browser, bukan di server.' Gunakan penanda ini setiap kali kamu membangun tombol interaktif, modal, atau form pengisian.

'use client';

import { useState } from "react";
export default function Counter() { const [c, setC] = useState(0); return <button onClick={() => setC(c+1)}>{c}</button>; }