Supaya Tombol dan Form Berfungsi, Begini Cara Membuat Client Component Next Js

Ditulis oleh Next.js

Tulis ‘use client’ di baris pertama file untuk mengubah Server Component menjadi Client Component di Next.js App Router. Tanpa itu, tombol, form, useState, dan useEffect tidak jalan karena semua component default dirender di server.

‘use client’ Bekerja untuk Apa di App Router

App Router memisahkan kode yang jalan di server dan di browser. Server Component menambil data dan merender HTML awal. Client Component melanjutkan interaksi setelah hydration.

Pakai Client Component ketika butuh:

  • useState, useReducer, useEffect, useRef
  • event seperti onClick, onChange, onSubmit
  • browser API seperti window, document, localStorage
  • form interaktif, counter, dropdown, modal, tab

Langkah Membuat Client Component yang Valid

Ikuti urutan ini agar tidak kena error:

  1. Buat file baru, misalnya components/CounterButton.tsx.
  2. Tulis 'use client' di baris pertama, sebelum semua import.
  3. Tambahkan state dan event handler di dalam component.
  4. Import Client Component tersebut dari page atau Server Component.
'use client';

import { useState } from 'react';

export default function CounterButton() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Klik: {count}
    </button>
  );
}

Aturan yang sering dilanggar:

  • Jangan buat Client Component sebagai async function.
  • Kirim props yang serializable saja seperti string, number, boolean, array, object polos.
  • Jangan import modul server-only, misalnya akses database langsung, ke dalam file ini.

BACA JUGA:

Kesalahan Umum dan Batasannya

Masalah Penyebab Solusi
Client Component async pakai async di component pindahkan fetch ke Server Component
Import server-only gagal query database di file client panggil lewat Server Action atau Route Handler
Props tidak terbaca kirim fungsi atau class instance kirim data polos saja

Jangan tempel 'use client' ke semua file saat ada error. Persempit ke batas interaktif saja, misalnya form atau tombolnya, supaya page tetap mendapat keuntungan render server. Validasi data sensitif tetap jalan di server walau form sudah validasi di browser.

FAQ

Apakah semua file harus pakai ‘use client’?

Tidak. Pasang hanya pada component interaktif, biarkan page dan layout tetap Server Component.

Bolehkah Client Component fetch data?

Boleh untuk kebutuhan interaksi seperti pencarian atau paginasi, data awal sebaiknya tetap diambil dari server.

Di mana posisi ‘use client’ ditulis?

Selalu di baris pertama file sebelum import atau kode lain.

Artikel Terkait