Lendo o Erro

Parte da seção Essenciais do Next.js do Journey de React da Coddy. Lição 18 de 47.

Você encontrará a fronteira entre servidor/cliente muito antes de compreendê-la totalmente, e a encontrará na forma de uma mensagem de erro. Tudo bem. Erros de framework não são punição; eles são a maneira mais rápida de aprender as regras.

Aqui está o primeiro problema que você vai encontrar. Uma página usa useState, o aplicativo se recusa a renderizar e o runtime diz:

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.

Leia da mesma forma que você leria um recado de um colega, em três partes:

O que deu errado: um componente precisa de um hook do React
Onde: <Home>, para que você saiba qual componente abrir
A regra e a correção: hooks só funcionam em componentes do cliente; adicione "use client"

Um bom erro de framework nomeia a regra que você quebrou. Passe por cima dele e você tentará adivinhar por vinte minutos; leia-o e você terminará em vinte segundos. Esta é uma habilidade que vale a pena praticar deliberadamente, porque é ela que separa as pessoas que gostam de um novo framework das pessoas que lutam contra ele.

Hora de corrigir um você mesmo.

Desafio

Iniciante

Esta página de contador está com defeito. Execute-a e leia o que o tempo de execução informa.

A página chama useState, mas é um componente do servidor, e os hooks só funcionam em componentes do cliente.

Faça exatamente o que o erro solicita: marque app/page.jsx como um componente do cliente.
Não altere mais nada: a lógica do contador já está correta.

Experimente você mesmo

import './globals.css';

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

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