エラーの読み方

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 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.

同僚からのメモを読むように、3つの部分に分けて読んでみましょう：

何が壊れたか：component が React hook を必要としている
どこで：<Home>、そのためどの component を開くべきかが分かります
ルールと解決策：Hooks は client Components で only work します。"use client" を add してください

優れたフレームワークのエラーメッセージは、違反したルールを教えてくれます。読み飛ばしてしまうと20分間勘に頼ることになりますが、ちゃんと読めば20秒で終わります。これは意識して練習する価値のあるスキルです。なぜなら、新しいフレームワークを楽しめる人と、それに苦しめられる人を分けるポイントだからです。

自分で1つ修正してみましょう。

チャレンジ

初心者

このカウンターページは壊れています。実行してランタイムの表示を確認してください。

このページは useState を呼び出していますが、サーバーコンポーネントになっており、フックはクライアントコンポーネントでしか機能しません。

エラーの指示通りに実行してください: app/page.jsx をクライアントコンポーネントとしてマークします。
それ以外は変更しないでください: カウンターのロジックはすでに正しくなっています。

自分で試してみよう

import './globals.css';

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

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