Next.js Client Componentsの使いどころとディレクトリ整理方法を初心者向けに解説

1. Client Componentsとは何か？

1. Client Componentsとは何か？

Next.jsでは、ReactコンポーネントをサーバーでレンダリングするServer Componentsと、クライアントでレンダリングするClient Componentsに分けて使うことができます。Client Componentsはユーザー操作に応じてリアルタイムに変化するUIを作るときに必要です。

例えば、ボタンを押すと内容が変わる部分や、フォームに入力した内容を即時に反映させたいときに使います。

2. Client Componentsの作り方

2. Client Componentsの作り方

Client Componentsを作るには、ファイルの先頭に'use client'を書きます。これにより、そのコンポーネントはブラウザでレンダリングされるようになります。

'use client';
import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

3. ディレクトリの基本整理

3. ディレクトリの基本整理

Client Componentsは特定のディレクトリにまとめると管理が楽になります。例えば、components/clientフォルダに入れておくと、どれがClient Componentsか一目でわかります。

// プロジェクト構造例
project/
├─ app/
├─ components/
│  ├─ client/
│  │  ├─ Counter.jsx
│  │  └─ FormInput.jsx
│  └─ server/
│     └─ Header.jsx

Server Componentsはcomponents/serverに分けておくと整理しやすくなります。

4. 小さな単位で分けるのがポイント

4. 小さな単位で分けるのがポイント

Client Componentsは状態やイベントを持つ小さな単位で作るのがコツです。大きなコンポーネントにまとめると再利用が難しくなります。

'use client';
import React, { useState } from "react";

export default function FormInput() {
  const [text, setText] = useState("");

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>入力内容: {text}</p>
    </div>
  );
}

5. Client Componentsの再利用方法

5. Client Componentsの再利用方法

Client Componentsを再利用するためには、必要な機能だけを持たせ、propsでデータを渡すようにします。

'use client';
import React from "react";

export default function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

こうすることで、ボタンの表示内容やクリック時の処理を変えたい場所で簡単に使い回せます。

6. Client ComponentsとServer Componentsを組み合わせる

6. Client ComponentsとServer Componentsを組み合わせる

Server Componentsでデータを取得し、Client Componentsでユーザー操作に応じて表示を更新するのが理想です。

import React from "react";
import Counter from "../components/client/Counter";

export default async function Page() {
  const data = await fetch('https://api.example.com/items')
    .then(res => res.json());

  return (
    <div>
      <h1>商品リスト</h1>
      <ul>
        {data.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
      <Counter />
    </div>
  );
}

7. ディレクトリ整理のベストプラクティス

7. ディレクトリ整理のベストプラクティス

長期的なプロジェクトでは、Client Componentsはcomponents/client、Server Componentsはcomponents/serverに分けて、さらに機能ごとにサブフォルダを作ると見通しがよくなります。

// 例: 機能別サブフォルダ
components/
├─ client/
│  ├─ forms/
│  │  └─ FormInput.jsx
│  ├─ buttons/
│  │  └─ Button.jsx
├─ server/
│  ├─ layouts/
│  │  └─ Header.jsx

こうすることで、どのコンポーネントがクライアント側で動くかすぐにわかり、メンテナンスが簡単になります。

8. まとめに向けた使い方のポイント

8. まとめに向けた使い方のポイント

Client Componentsを使うと、ユーザー操作に応じた動的なUIを簡単に作れます。整理のポイントは次の通りです。

• Client Componentsは'use client'で宣言する
• 小さな単位で作り、再利用できるようにpropsを活用する
• ディレクトリを分けて整理する（components/clientとcomponents/server）
• Server Componentsと組み合わせて効率的にデータ表示を行う

これらの方法を意識すれば、Next.jsでの開発がスムーズになります。

まとめ

まとめ

本記事では、Next.jsにおけるClient Componentsの基本概念と、ディレクトリ整理の方法、再利用のポイントについて詳しく解説しました。Client Componentsはブラウザ上で動作するReactコンポーネントであり、ユーザーの操作に応じてリアルタイムにUIを変化させるのに最適です。Server Componentsと組み合わせることで、サーバー側でデータを取得しつつ、クライアント側でインタラクティブな操作を可能にする効率的な開発が可能になります。特に長期的なプロジェクトでは、Client ComponentsとServer Componentsを機能ごとにディレクトリで整理しておくことで、コードの見通しが良くなりメンテナンス性も向上します。また、Client Componentsを小さな単位で作り、propsを活用して再利用性を高めることで、複雑なUIも簡単に管理できるようになります。

具体的なディレクトリ整理の例としては、components/clientフォルダにフォームやボタンなどの小さな単位のClient Componentsをまとめ、components/serverフォルダにヘッダーやレイアウトのようなServer Componentsをまとめる方法があります。さらに機能別にサブフォルダを作ることで、どのコンポーネントがどこで使われているのかが一目でわかり、開発チーム内での共有もしやすくなります。

また、Client Componentsを再利用する場合は、必要なデータをpropsで渡すことで、同じコンポーネントを異なる状況で使い回すことができます。これにより、UIの統一感を保ちつつ、コードの重複を減らすことが可能です。さらに、状態管理やイベントハンドリングをClient Componentsに集約することで、ページ全体のレンダリング効率も向上します。Server Componentsでデータを取得しつつ、Client Componentsでユーザー操作に応じた動的表示を行う組み合わせは、Next.jsのモダンな開発スタイルとして非常に効果的です。

本記事のサンプルコードでは、カウントアップボタンや入力フォームを例に、Client Componentsの作り方、propsの使い方、ディレクトリ整理の具体例を示しました。小さな単位でコンポーネントを作ることで、他のページや機能でも簡単に再利用でき、開発効率が格段に向上します。また、ReactのuseStateフックを使った動的なUI更新や、Server ComponentsとClient Componentsを組み合わせたデータ表示の例も紹介しました。

'use client';
import React, { useState } from "react";

export default function SampleButton() {
  const [clicked, setClicked] = useState(false);

  return (
    <div>
      <button onClick={() => setClicked(!clicked)}>
        {clicked ? "クリック済み" : "クリックしてね"}
      </button>
    </div>
  );
}