Lire l'erreur

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 18 sur 47.

Vous rencontrerez la frontière serveur/client bien avant de la comprendre pleinement, et vous la rencontrerez sous la forme d'un message d'erreur. C'est très bien. Les erreurs de framework ne sont pas une punition ; elles sont le moyen le plus rapide d'apprendre les règles.

Voici celui auquel vous serez confronté en premier. Une page utilise useState, l'application refuse de s'afficher et l'environnement d'exécution indique :

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.

Lisez-le comme vous liriez une note d'un collègue, en trois parties :

Ce qui a cassé : un component a besoin d'un hook React
Où : <Home>, pour que vous sachiez quel component ouvrir
La règle et le fix : les Hooks ne fonctionnent que dans les Client Components ; add "use client"

Une bonne erreur de framework nomme la règle que vous avez enfreinte. Survolez-la et vous devinerez pendant vingt minutes ; lisez-la et vous aurez terminé en vingt secondes. C'est une compétence qui vaut la peine d'être pratiquée délibérément, car c'est celle qui sépare les personnes qui apprécient un nouveau framework de celles qui luttent contre lui.

À vous de fix one vous-même.

Défi

Débutant

Cette page de compteur est cassée. Exécutez-la et lisez ce que le runtime indique.

La page appelle useState, mais c'est un server component, et les hooks ne fonctionnent que dans les client components.

Faites exactement ce que l'erreur demande : marquez app/page.jsx comme un client component.
Ne modifiez rien d'autre : la logique du compteur est déjà correcte.

Essayez vous-même

import './globals.css';

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

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