Hatayı Okuma

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

Sunucu/istemci (server/client) sınırıyla, onu tamamen anlamadan çok önce karşılaşacaksınız ve bununla bir hata mesajı olarak tanışacaksınız. Bu sorun değil. Çerçeve (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.

Bir iş arkadaşınızdan gelen bir notu okur gibi, üç bölümde okuyun:

Ne bozuldu: bir component bir React hook'una ihtiyaç duyuyor
Nerede: hangi component'i açacağınızı bilmeniz için <Home> içinde
Kural ve çözüm: Hook'lar yalnızca client component'lerinde ç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 sayac 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 server component ve hook'lar yalnızca client component'lerde çalışır.

Hatanın tam olarak istediğini yapın: app/page.jsx dosyasını bir client component 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>
    );
}