Чтение ошибки

Часть раздела Основы Next.js путешествия по React на Coddy — урок 18 из 47.

Вы столкнетесь с границей между сервером и клиентом задолго до того, как полностью поймете ее, и встретите ее в виде сообщения об ошибке. Это нормально. Ошибки фреймворка — это не наказание; это самый быстрый способ выучить правила.

Вот ошибка, с которой вы столкнетесь в первую очередь. Страница использует useState, приложение отказывается рендериться, и среда выполнения сообщает:

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.

Читайте это так, как читали бы записку от коллеги, из трёх частей:

Что сломалось: component needs React hook
Где: <Home>, чтобы вы знали, какой component открыть
Правило и fix: hooks работают only в client components; add "use client"

Хорошая ошибка фреймворка указывает на правило, которое вы нарушили. Бегло просмотрите её — и будете гадать двадцать минут; прочитайте её — и справитесь за двадцать секунд. Это навык, который стоит осознанно развивать, потому что именно он отличает тех, кто получает удовольствие от нового фреймворка, от тех, кто с ним борется.

Пришло время исправить одну самостоятельно.

Задание

Новичок

Эта страница счетчика сломана. Запустите ее и прочитайте, что говорит среда выполнения.

Страница вызывает useState, но это server component, а хуки работают только в client components.

Сделайте именно то, что требует ошибка: отметьте app/page.jsx как client component.
Больше ничего не меняйте: логика счетчика уже верна.

Попробуйте сами

import './globals.css';

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

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