'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 başıboş bir dize gibi görünüyor. Öyle değil: Bu bir yönergedir ve ezberlemeye değer iki kuralı vardır; çünkü ikisi de insanları zor durumda bırakır.

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';

Onu bir import ifadesinin altına koyarsan direktif olmaktan çıkar: anlamsız bir string ifadesine dönüşür, dosya bir server component olarak kalır ve sanki onu hiç yazmamışsın gibi hook hatası alırsın. Bu hata insanlara gerçekten zaman kaybettiriyor, çünkü satır dosyanın içinde, doğru görünecek şekilde orada duruyor.

Kural 2: Tüm dosyayı işaretler

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

'use client';

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

Ve aşağıya doğru yayılır: bir istemci bileşeninin içe aktardığı ve oluşturduğu her şey de istemci kodu hâline gelir. Büyük bir dosyanın en üstündeki tek bir yönerge, fark edilmeden tarayıcıya çok miktarda JavaScript gönderebilir; bir sonraki dersin çözdüğü sorun da tam olarak budur.

Görev

Kolay

components/Counter.jsx içinde yanlış yerde bir 'use client' satırı var. Uygulama yine de hook hatasıyla başarısız oluyor.

'use client'; satırını components/Counter.jsx dosyasının ilk satırı olacak şekilde, import ifadesinin üzerine taşı.

Bu dosyadaki her iki bileşen de, yani Counter ve onun oluşturduğu ResetButton, bu tek satır sayesinde istemci bileşeni olur. İkinci bir yönergeye ihtiyacın yok ve bir tane daha eklememelisin.

Kendin dene

import './globals.css';

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

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