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 leria uma anotação de um colega, em três partes:

O que quebrou: um component precisa de um React hook
Onde: <Home>, para que você saiba qual component abrir
A regra, e a solução: Hooks só funcionam em Client Components; 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á quebrada. Execute-a e leia o que o runtime diz.

A página chama useState, mas é um server component, e hooks funcionam apenas em client components.

Faça exatamente o que o erro pede: marque app/page.jsx como um client component.
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>
    );
}