Leggere l'errore

Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 18 di 47.

Incontrerai il confine tra server e client molto prima di capirlo fino in fondo, e lo incontrerai sotto forma di messaggio di errore. Va bene così. Gli errori del framework non sono una punizione: sono il modo più rapido per imparare le regole.

Ecco il primo errore in cui ti imbatterai. Una pagina usa useState, l'app si rifiuta di eseguire il rendering e il runtime dice:

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.

Leggilo come leggeresti una nota di un collega, in tre parti:

Che cosa non funziona: un componente ha bisogno di un hook di React
Dove: <Home>, così sai quale componente aprire
La regola e la correzione: gli hook funzionano solo nei componenti client; aggiungi "use client"

Un buon messaggio di errore del framework indica la regola che hai violato. Se lo ignori, farai tentativi a caso per venti minuti; se lo leggi, avrai finito in venti secondi. È un'abilità che vale la pena esercitare intenzionalmente, perché è ciò che distingue chi si diverte a usare un nuovo framework da chi ci lotta.

È ora di correggerne uno tu.

Sfida

Principiante

Questa pagina contatore non funziona. Eseguila e leggi cosa dice il runtime.

La pagina chiama useState, ma è un componente server e gli hook funzionano solo nei componenti client.

Fai esattamente ciò che chiede l'errore: contrassegna app/page.jsx come componente client.
Non modificare nient'altro: la logica del contatore è già corretta.

Provalo tu

import './globals.css';

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

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