Membaca Error
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 18 dari 47.
Kamu akan menemui batas server/client jauh sebelum kamu benar-benar memahaminya, dan kamu akan menemuinya dalam bentuk pesan error. Tidak masalah. Error framework bukanlah hukuman; error tersebut adalah cara tercepat untuk mempelajari aturannya.
Inilah masalah pertama yang akan kamu temui. Sebuah halaman menggunakan useState, aplikasi menolak untuk dirender, lalu runtime menampilkan:
You're importing a component that needs a
React hook (in <Home>). Hooks only work in Client
Components. To fix this, add "use client" to the top
of the file.Bacalah seperti kamu membaca catatan dari rekan kerja, dalam tiga bagian:
- Yang bermasalah: sebuah komponen memerlukan hook React
- Lokasi:
<Home>, jadi kamu tahu komponen mana yang harus dibuka - Aturan dan perbaikannya: hook hanya berfungsi di komponen client; tambahkan
"use client"
Error framework yang baik menyebutkan aturan yang kamu langgar. Kalau kamu hanya membaca sekilas, kamu akan menebak-nebak selama dua puluh menit. Baca error itu, dan kamu akan selesai dalam dua puluh detik. Ini keterampilan yang layak dilatih dengan sengaja, karena keterampilan inilah yang membedakan orang yang menikmati framework baru dari orang yang kesulitan menggunakannya.
Saatnya memperbaiki satu sendiri.
Tantangan
PemulaHalaman penghitung ini rusak. Jalankan dan baca pesan runtime.
Halaman ini memanggil useState, tetapi ini adalah server component, dan hooks hanya berfungsi di client component.
- Lakukan tepat seperti yang diminta error: tandai
app/page.jsxsebagai client component. - Jangan ubah apa pun lagi: logika penghitung sudah benar.
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