'use client' Satırı

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

'use client', birinin silmeyi unuttuğu sahipsiz bir metin dizesi gibi görünebilir. Ama öyle değildir: O bir yönergedir (directive) ve ezberlemeye değer iki kuralı vardır, çünkü her ikisi de can yakabilir.

Kural 1: ilk satır olmalıdır

İçe aktarmalardan (imports) önce. Önemli yorumlardan önce. Dosyadaki en ilk şey:

'use client';

import { useState } from 'react';

Bir directive'i bir import ifadesinin altına koyarsanız, artık bir directive olmaktan çıkar: anlamsız bir metin ifadesine (string expression) dönüşür, dosya bir server component olarak kalır ve sanki onu hiç yazmamışsınız gibi hook hatası alırsınız. Bu durum insanlara ciddi zaman kaybettirir, çünkü o satır dosyada aynen oradadır ve doğru görünür.

Kural 2: Tüm dosyayı işaretler

Tek bir bileşeni işaretlemenin bir yolu yoktur. Bir dosyada bu yönerge varsa, içinde tanımlanan her şey client kodudur:

'use client';

function Row() { … }        // istemci
export default function Table() { … }   // istemci de

Ve bu durum aşağıya doğru yayılır: bir client component'inin import ettiği ve render ettiği her şey de client koduna dönüşür. Büyük bir dosyanın en üstündeki tek bir direktif, sessizce tarayıcıya çok miktarda JavaScript gönderebilir; bu da tam olarak bir sonraki dersin çözdüğü sorundur.

Görev

Kolay

components/Counter.jsx dosyasında yanlış yerde duran bir 'use client' satırı var. Uygulama bu yüzden hook hatası veriyor.

'use client'; ifadesini components/Counter.jsx dosyasının import satırından da önceye, yani ilk satıra taşıyın.

Bu tek satır sayesinde o dosyadaki her iki bileşen de (Counter ve onun render ettiği ResetButton) client componenti haline gelir. İkinci bir direktife ihtiyacınız yoktur ve eklememelisiniz.

Kendin dene

import './globals.css';

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

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