※当サイトはアフィリエイト広告を利用しています。商品リンクにはプロモーションを含む場合があります。

Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち

困ってた自分に届けたい話

Next.jsでフロントの機能を実装していたとき、
「なんでこのコード、動かないんだろう…？」と何度もつまずいていました。

とくに useState や useEffect を使おうとすると、
エラーが出たり、真っ白な画面になったりして、「？？？」の連続。

いろいろ調べてやっと気づいたのが、"use client" を書いてなかった。
そんな一言だけで動くのか…と、拍子抜けしたような記憶がまだあります。

てんハロ運営者

この記事は、同じように困っていた方への備忘録兼シェアとして書いています。

Next.js をもっと詳しく学びたい人へおすすめの本

▶ 動かしながら基礎から学びたい人に
「まずは手を動かしたい！」という人にぴったりの一冊。基本構造から丁寧に解説されており、Next.jsとReactの連携も自然に身につきます。初学者でもステップを追いやすく、サンプルアプリの構築を通して理解を深められる構成です。

動かして学ぶ！Next.js/React開発入門 新品価格 ￥3,168から (2025/7/21 23:18時点)

▶ Reactの経験があり、次のステップへ進みたい人に
「Reactは少し触ったことがあるけど、Next.jsを仕事で使いこなしたい」という人向け。実践を意識した構成で、Webアプリの構造、レンダリング戦略、SEO対応など、現場で必要なノウハウが詰まっています。

React Next.js 実践プログラミング入門: React Next.js モダンWeb開発実践ガイド 新品価格 ￥3,300から (2025/7/21 23:17時点)

▶ App Routerを本格的に学びたいエンジニアへ
App Routerを軸に、最新のNext.js開発に対応した本格派。中級者以上の方が「一歩先へ進みたい」と感じたときに読みたい一冊。デザインパターンや設計の視点もあり、長期的に役立つ内容です。

実践Next.js —— App Routerで進化するWebアプリ開発 エンジニア選書 新品価格 ￥3,665から (2025/7/21 23:18時点)

なぜ "use client" が必要なの？

Next.js 13 以降（App Router 環境）では、コンポーネントは基本的にサーバーコンポーネントとして扱われます。
そのため、以下のようなブラウザでしか動かない処理は、デフォルトでは使えません。

• useState, useEffect, useRef などの React のクライアントフック
• window や document などのブラウザAPI
• ボタンクリックなどのイベント処理

これらを使いたいときには、そのファイルの先頭に "use client" と書く必要があるというのが、Next.js App Router のルールです。

サーバーコンポーネントとは？

Next.js では、特に何も書かないコンポーネントは「サーバーコンポーネント」として扱われます。

• サーバー上で実行される（ユーザーのブラウザでは動かない）
• セキュアにデータを扱える
• F12（開発者ツール）でコードを見ることができない

export default function MyComponent() {
  // サーバー側で実行される
  return <div>サーバーから描画されました</div>;
}

export default function MyComponent() {
  // サーバー側で実行される
  return <div>サーバーから描画されました</div>;
}

クライアントコンポーネントとは？

"use client" をファイルの先頭に書くと、そのコンポーネントは「クライアントコンポーネント」として動きます。

• ブラウザ側で実行される
• ボタンクリックやフォーム送信などの動作ができる
• 開発者ツールで中身が見える（HTMLやJS）

"use client";

export default function ClientComponent() {
  const handleClick = () => alert("クリックされました");

  return <button onClick={handleClick}>クリック</button>;
}

"use client";

export default function ClientComponent() {
  const handleClick = () => alert("クリックされました");

  return <button onClick={handleClick}>クリック</button>;
}

一度クライアントにすると、どうなるの？

親が "use client" を持っていると？

あるコンポーネントの先頭に "use client" と書くと、そのファイル全体がクライアントコンポーネントとして扱われます。
中に書かれたロジックも、サーバーではなくブラウザ上で動く前提になります。

たとえばその中に fetch() や useState() があれば、それはクライアント上で動きますし、重い処理やセキュアな処理もブラウザに送られるリスクがあります。

途中でサーバーに戻せるのか？

Next.js では、ファイルの先頭に "use client" を書くことで、そのファイル全体がクライアントコンポーネントとして扱われます。
途中で "use server" に切り替えるような書き方はできません。

ただし、"use client" を削除すれば、そのファイルは再びサーバーコンポーネントに戻ります。
つまり「一度クライアントにしたら元に戻せない」というわけではなく、明示的に切り替え直せばOKという仕組みです。

よりセキュアにしたいときは？

フォーム送信などで await fetch("/api/contact", {...}) のような処理をすることがあります。 この処理を「クライアントコンポーネント内で実行」すると、リクエスト内容がF12で見えてしまうことがあります。

よりセキュアにしたい場合は、下記の構成にしましょう！

• ユーザー入力（例：名前やメール）をクライアント側で受け取る
• それを API Route（サーバー側）に送って処理する

まとめ

Zodとは？React Hook Formとの連携でバリデーション実装

TypeScriptで使えるバリデーションライブラリ「Zod」の基本と、React Hook Formとの連携方法を解説します。

it-bokenki.com