Next.jsでReact Hooksを使いこなしたい方へ
この記事では、Next.jsの環境でReact Hooks（useState、useEffectなど）を正しく、迷わず使う方法をシンプルに解説します。基本の書き方から注意点まで、実践に役立つ内容をまとめました。
この記事はこんな人にオススメ！
- Next.jsでHooksをどう使うか迷っている方
- useEffectやuseRefの挙動に戸惑ったことがある方
- クライアント・サーバーの違いに自信がない方
基本をしっかり押さえたい方に向けて、丁寧にご紹介していきます。
React Hooksとは？Next.jsで使う前に
React Hooksは、Reactの関数コンポーネントで状態管理や副作用処理を可能にする機能です。Next.jsでも同様に使用できますが、App Routerやコンポーネントの種類によって制限があるため、導入前に理解しておくことが大切です。
React Hooksの基本とは？
- useState：状態を保持する
- useEffect：副作用（例：データ取得、タイマーなど）を扱う
- useRef：再レンダリングせずに値を保持する、またはDOM参照に使う
これらはすべて、コンポーネント関数のトップレベルでのみ使用する必要があります。
Next.jsでの位置づけと注意点
Next.jsでは、ページ・コンポーネントごとに「クライアント or サーバー」の区別があります。Hooksはクライアントコンポーネントでのみ使用可能です。
App Routerとの関係性
App Router（app/ディレクトリ構成）では、デフォルトで各ファイルがサーバーコンポーネントとして扱われるため、Hooksは使えません。必要があれば明示的にクライアントとして指定します。
use client 指定の意味
コンポーネントファイルの最上部に以下を記述します：
'use client';これにより、そのファイルがクライアントコンポーネントとして実行され、Hooksが使用できるようになります。
Next.jsでReact Hooksを使う基本構文
Next.jsでもReact Hooksの基本構文は同じです。ただし、クライアントで動くように設計することが前提となります。
useStateの基本的な使い方
const [count, setCount] = useState(0);count：現在の状態setCount：状態を更新する関数0：初期値
useEffectで副作用を扱う流れ
副作用とは、データ取得、イベントリスナー登録、タイマー設定など。Reactでは useEffect を使って書きます。
useEffect(() => {
console.log('初回のみ実行');
}, []);
依存配列の役割と使い方
[]：初回マウント時のみ実行[value]：valueが変更されたときに再実行- 省略：毎回レンダリング後に実行（推奨されない）
クリーンアップ関数の書き方
副作用の後始末（例：イベントの解除）には、return で関数を返します：
useEffect(() => {
const onScroll = () => console.log('scrolling');
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
クライアントコンポーネントとHooksの関係
Next.jsのクライアントコンポーネントでは、通常のReact Hooksが使えます。ここでは主に useRef、useMemo、useCallback などの応用的な使い方に焦点を当てます。
useRef・useMemoなどの使いどころ
useRef：DOM要素の参照、または値の保持（再レンダリングしない）useMemo：重い計算をメモ化してパフォーマンス最適化
例：
const result = useMemo(() => heavyCalc(input), [input]);クライアントでのデータ取得の考え方
クライアントでのデータ取得は useEffect や useSWR を使うのが一般的です。
useEffect × fetch の基本形
useEffect(() => {
const loadData = async () => {
const res = await fetch('/api/data');
const json = await res.json();
setData(json);
};
loadData();
}, []);useSWRとの違いと選び方
useSWR は「データ取得+キャッシュ+再取得」を簡潔に実現できるHooksライブラリです。
useEffect: 素朴な fetch 処理（手動制御）useSWR: 自動リトライ・キャッシュ・再検証付き
よく使うHooksの使い方と注意点
useRefとDOM操作の基本
const inputRef = useRef<HTMLInputElement>(null);
return <input ref={inputRef} />;- フォーカス制御や高さ取得に便利
- 状態変更なしに情報を保持できる
useCallbackで関数の無駄を減らす
再レンダリング時に関数が毎回再定義されるのを防ぎます。
const handleClick = useCallback(() => {
console.log('clicked');
}, []);useMemoで処理の最適化を図る
重い計算処理の結果をキャッシュし、依存配列が変わったときのみ再評価されます。
const result = useMemo(() => expensiveCalc(data), [data]);サーバーコンポーネントとの使い分け
サーバーコンポーネントではHooksが使えない理由
Reactのサーバーコンポーネントは「レンダリング専用」で、クライアント状態やイベントは扱いません。よって useState や useEffect は使用できません。
Hooksを使いたい場合の分離の考え方
Container/Presentationalパターンの活用
- Container：
use clientで Hooks を使う - Presentational：状態を受け取ってUIに描画するだけ
この分離により、責務を明確にして保守性が上がります。
よくあるエラーとつまずきポイント
useEffectが動かないときの対処法
use clientをつけていない- 依存配列が誤っている
- 非同期関数を直接
useEffectに渡している（関数の中で定義すべき）
Hydrationエラーの原因と回避方法
サーバーとクライアントの描画内容が不一致だと Hydration error になります。以下で回避できます：
- クライアント限定処理は
useEffect内に書く - 初期値とクライアント値の差異を避ける
「Hooksはトップレベルでのみ呼び出す」エラーの理解
以下のように、条件分岐やループ内では使用できません：
if (isEnabled) {
useEffect(() => {}, []); // ❌ NG
}Hooksは常に関数の最上位スコープで宣言する必要があります。
よく使われるReact Hooks一覧【早見表】
Next.jsで使えるReact Hooksの中でも、特に登場頻度が高いものを簡単にまとめます。
| フック名 | 用途の概要 |
|---|---|
useState | コンポーネント内で状態を保持する |
useEffect | 副作用（データ取得やイベント登録）処理 |
useRef | DOM参照やミューテーブルな値の保持 |
useMemo | 計算結果のメモ化によるパフォーマンス最適化 |
useCallback | 関数のメモ化で再定義を防ぐ |
useContext | グローバルな状態やテーマの共有 |
useReducer | useStateより複雑な状態遷移に対応 |
useLayoutEffect | DOM更新直後に処理を行いたい場合に使用 |
useId | 一意なIDを生成する |
useTransition | UI更新の優先度を制御する（並列処理） |
まとめと次に学びたいステップ
この記事のまとめ
- Hooksはクライアントコンポーネントでのみ使える
useState,useEffect,useRefは基本中の基本- App Routerでは
use client指定を忘れずに - サーバーコンポーネントとの使い分けも重要
次に学ぶべきおすすめのトピック
カスタムフックの作り方
再利用可能なロジックを切り出すことで、コードの可読性と保守性を高められます。
状態管理ライブラリとの連携（例：Jotai, Zustand）
アプリ全体で状態を共有したい場合は、軽量な状態管理ライブラリとの組み合わせが効果的です。
コメント