Reading the Error

Part of the Next.js Essentials section of Coddy's React journey — lesson 18 of 47.

You will meet the server/client boundary long before you fully understand it, and you'll meet it as an error message. That's fine. Framework errors are not punishment; they're the fastest way to learn the rules.

Here's the one you'll hit first. A page uses useState, the app refuses to render, and the runtime says:

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.

Read it the way you'd read a note from a colleague, in three parts:

What broke: a component needs a React hook
Where: <Home>, so you know which component to open
The rule, and the fix: hooks only work in client components; add "use client"

A good framework error names the rule you broke. Skim past it and you'll guess for twenty minutes; read it and you're done in twenty seconds. This is a skill worth practising deliberately, because it's the one that separates people who enjoy a new framework from people who fight it.

Time to fix one yourself.

Challenge

Beginner

This counter page is broken. Run it and read what the runtime says.

The page calls useState, but it's a server component, and hooks only work in client components.

Do exactly what the error asks: mark app/page.jsx as a client component.
Change nothing else: the counter logic is already correct.

Try it yourself

import './globals.css';

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

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