'use client' の行

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 19/47。

'use client' は、誰かが消し忘れた孤立した文字列のように見えるかもしれません。しかし違います。これはディレクティブ（指示子）であり、多くの人がハマりがちな覚えておくべき2つのルールがあります。

ルール 1: 最初の行でなければならない

import の前。重要なコメントの前。ファイルの完全な先頭：

'use client';

import { useState } from 'react';

これを`import`の下に配置するとディレクティブではなくなります。ただの無意味な文字列式となり、ファイルはサーバーコンポーネントのままで、まるで指定しなかったかのようにフックエラーが発生します。ファイル内にコードが存在し正しく見えるため、これは多くの人が無駄な時間を費やす原因となります。

ルール 2: ファイル全体を対象とする

特定のコンポーネントだけを1つ指定してマークする方法はありません。ファイルにディレクティブが含まれている場合、その中で定義されているすべてが client コードになります：

'use client';

function Row() { … }        // クライアント
export default function Table() { … }   // クライアントも

そして、これは下方向にも広がります。`client` コンポーネントが `import` してレンダリングするものはすべて、同様にクライアントコードになります。大きなファイルの先頭にある1つのディレクティブによって、意図せず大量のJavaScriptがブラウザに送信される可能性があり、これこそが次のレッスンで解決する課題です。

チャレンジ

簡単

components/Counter.jsx に 'use client' の行がありますが、間違った場所にあります。そのため、アプリはフックのエラーで失敗してしまいます。

'use client'; を移動して、components/Counter.jsx の import の上、つまり最初の行に配置してください。

その1行により、そのファイル内にある両方のコンポーネント（Counter とそれがレンダリングする ResetButton）がクライアントコンポーネントになります。2つ目のディレクティブは不要であり、追加すべきではありません。

自分で試してみよう

import './globals.css';

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

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