Odczytywanie błędu

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 18 z 47.

Natkniesz się na granicę między serwerem a klientem, na długo przed tym, zanim w pełni ją zrozumiesz, i poznasz ją w postaci komunikatu o błędzie. To nic złego. Błędy frameworka nie są karą — to najszybszy sposób na poznanie zasad.

Oto pierwszy błąd, na który trafisz. Strona używa useState, aplikacja odmawia renderowania, a środowisko uruchomieniowe wyświetla komunikat:

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.

Przeczytaj to tak, jak czytasz notatkę od współpracownika, w trzech częściach:

Co się zepsuło: komponent potrzebuje hooka React
Gdzie: <Home>, dzięki czemu wiesz, który komponent otworzyć
Zasada i rozwiązanie: hooki działają tylko w komponentach klienckich; dodaj "use client"

Dobry komunikat o błędzie frameworka wskazuje złamaną przez ciebie zasadę. Jeśli go zignorujesz, będziesz zgadywać przez dwadzieścia minut; przeczytaj go, a uporasz się z problemem w dwadzieścia sekund. Warto świadomie ćwiczyć tę umiejętność, bo to ona odróżnia osoby, które czerpią przyjemność z poznawania nowego frameworka, od tych, które z nim walczą.

Czas samodzielnie naprawić jeden błąd.

Wyzwanie

Początkujący

Ta strona licznika jest zepsuta. Uruchom ją i przeczytaj komunikat środowiska uruchomieniowego.

Strona wywołuje useState, ale jest komponentem serwerowym, a hooki działają tylko w komponentach klienckich.

Zrób dokładnie to, o co prosi komunikat o błędzie: oznacz app/page.jsx jako komponent kliencki.
Nie zmieniaj niczego więcej: logika licznika jest już poprawna.

Spróbuj swoich sił

import './globals.css';

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

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