Hatayı Okuma

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası. Ders 18 / 47.

Sunucu/istemci sınırıyla onu tam olarak anlamadan çok önce karşılaşacaksın ve onunla bir hata mesajı olarak karşılaşacaksın. Sorun değil. Framework hataları bir ceza değildir; kuralları öğrenmenin en hızlı yoludur.

İlk karşılaşacağınız durum şudur. Bir sayfa useState kullanır, uygulama render edilmeyi reddeder ve runtime şu hatayı verir:

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.

Onu, bir iş arkadaşından gelen bir notu okuyormuşsun gibi, üç bölümde okuyun:

Ne bozuldu: bir bileşenin React hook’una ihtiyacı var
Nerede: <Home>; böylece hangi bileşeni açacağınızı bilirsiniz
Kural ve düzeltme: hook’lar yalnızca istemci bileşenlerinde çalışır; "use client" ekleyin

İyi bir framework hatası, ihlal ettiğiniz kuralın adını belirtir. Üstünkörü geçerseniz yirmi dakika tahmin yürütmekle uğraşırsınız; okursanız yirmi saniyede işinizi bitirirsiniz. Bu, bilinçli olarak pratik yapmaya değer bir beceridir, çünkü yeni bir framework'ten keyif alan insanlarla ona karşı mücadele eden insanları birbirinden ayıran şey tam olarak budur.

Kendi başınıza bir tanesini düzeltme zamanı.

Görev

Başlangıç

Bu sayaç sayfası bozuk. Çalıştırın ve çalışma zamanının ne söylediğini okuyun.

Sayfa useState çağırıyor, ancak bu bir sunucu bileşeni ve kancalar yalnızca istemci bileşenlerinde çalışır.

Hatanın istediğini aynen yapın: app/page.jsx dosyasını istemci bileşeni olarak işaretleyin.
Başka hiçbir şeyi değiştirmeyin: sayaç mantığı zaten doğru.

Kendin dene

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}