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 componente necesita un hook de React
Dónde: <Home>, así sabrás qué componente abrir
La regla y la solución: los hooks solo funcionan en componentes de cliente; añade "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 indica el tiempo de ejecución.

La página llama a useState, pero es un componente del servidor, y los hooks solo funcionan en componentes del cliente.

Haz exactamente lo que solicita el error: marca app/page.jsx como un componente del cliente.
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>
    );
}