Baris 'use client'
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 19 dari 47.
'use client' terlihat seperti string nyasar yang lupa dihapus seseorang. Padahal bukan: ini adalah direktif, dan ada dua aturan yang perlu kamu ingat karena keduanya sering membuat orang keliru.
Aturan 1: harus menjadi baris pertama
Sebelum import. Sebelum komentar yang penting. Hal pertama di dalam file:
'use client';
import { useState } from 'react';Letakkan di bawah import dan baris itu tidak lagi menjadi direktif: baris itu menjadi ekspresi string yang tidak berguna, file tetap menjadi komponen server, dan kamu mendapatkan error hook seolah-olah kamu belum pernah mengetikkannya. Kesalahan ini benar-benar menyita waktu, karena barisnya ada tepat di dalam file dan terlihat benar.
Aturan 2: ini menandai seluruh file
Tidak ada cara untuk menandai satu komponen saja. Jika sebuah file memiliki direktif tersebut, semua yang didefinisikan di dalamnya adalah kode client:
'use client';
function Row() { … } // client
export default function Table() { … } // client jugaDan hal ini menyebar ke bawah: apa pun yang diimpor dan dirender oleh komponen client juga menjadi kode client. Satu direktif di bagian atas file besar dapat diam-diam mengirim banyak JavaScript ke browser, dan inilah masalah yang akan diatasi oleh pelajaran berikutnya.
Tantangan
Mudahcomponents/Counter.jsx memiliki baris 'use client' di tempat yang salah. Aplikasi tetap gagal karena error hook.
- Pindahkan
'use client';agar menjadi baris pertama dicomponents/Counter.jsx, di atas import.
Kedua komponen di file itu, Counter dan ResetButton yang direndernya, menjadi komponen client hanya dengan satu baris itu. Kamu tidak memerlukan direktif kedua, dan sebaiknya jangan menambahkannya.
Coba sendiri
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Dasar-Dasar Next.js
4Server & Client
Dua Jenis KomponenMembaca ErrorBaris 'use client'Jaga Bagian Client Tetap KecilServer di Dalam ClientRingkasan: Server & Client