Lectura del error

Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 18 de 47.

Te encontrarás con el límite entre servidor y cliente mucho antes de entenderlo por completo, y te lo encontrarás como un mensaje de error. Está bien. Los errores del framework no son un castigo; son la forma más rápida de aprender las reglas.

Aquí tienes el primero con el que te vas a encontrar. Una página usa useState, la app se niega a renderizar y el entorno de ejecución 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.

Léelo como leerías una nota de un colega, en tres partes:

Qué se rompió: un component needs un hook de React
Dónde: <Home>, para que sepas qué component abrir
La regla y la fix: los Hooks only work en client Components; add "use client"

Un buen error de marco de trabajo nombra la regla que rompiste. Pásalo por alto y adivinarás durante veinte minutos; léelo y habrás terminado en veinte segundos. Esta es una habilidad que vale la pena practicar deliberadamente, porque es la que separa a las personas que disfrutan de un nuevo marco de trabajo de las que luchan contra él.

Es hora de corregir uno por tu cuenta.

Desafío

Principiante

Esta página de contador está rota. Ejecútala y lee lo que dice el entorno de ejecución.

La página llama a useState, pero es un server component, y los hooks solo funcionan en client components.

Haz exactamente lo que pide el error: marca app/page.jsx como un client component.
No cambies nada más: la lógica del contador ya es correcta.

Pruébalo tú mismo

import './globals.css';

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

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