ReactベースのフレームワークであるNext.jsにおいて、コンポーネントはアプリの基本単位です。この記事では、「Next.jsにおけるコンポーネントとは何か」から「状態管理」「再利用のコツ」「サーバーコンポーネントとクライアントコンポーネントの違い」まで、わかりやすく解説していきます。
Contents
✅ コンポーネントとは？
Next.jsはReactベースなので、コンポーネントベースでUIを構築します。
コンポーネントとは、ボタン、フォーム、カード、ヘッダー、フッターなどの部品を一つひとつ定義して再利用できる仕組みです。
// 例: ボタンコンポーネント（Button.tsx）
export default function Button({ label }: { label: string }) {
return <button>{label}</button>;
}
このように小さなパーツを組み合わせて、大きなページを組み立てていくのがNext.jsの基本的な考え方です。
🧱 コンポーネントの分類
Next.js（13以降のApp Router構成）では、以下の2種類に分類されます。
| 種類 | 特徴 |
|---|---|
| サーバーコンポーネント | デフォルト。SSR（サーバー側で描画）。DB・APIとの連携に最適 |
| クライアントコンポーネント | use clientを先頭に書く。ユーザー操作や状態管理、イベント処理に必要 |
🔸 サーバーコンポーネントの例
// app/page.tsx
import Header from '@/components/Header';
export default function HomePage() {
const session = await getSession(); // サーバーで取得
return (
<>
<Header />
<h1>こんにちは、{session?.user?.name ?? 'ゲスト'}さん</h1>
</>
);
}
特徴：
- デフォルトはサーバーコンポーネント
- APIやDBとやり取りしやすい
useEffectやuseStateは使えない
🔹 クライアントコンポーネントの例
'use client';
import { useState } from 'react';
export default function LikeButton() {
const [liked, setLiked] = useState(false);
return (
<button onClick={() => setLiked(!liked)}>
{liked ? '❤️ いいね済み' : '♡ いいね'}
</button>
);
}
特徴：
- フロント側で描画される
- 状態（useState）や副作用（useEffect）を使える
- イベント処理（onClickなど）に最適
🎨 コンポーネント設計のコツ
1. 小さく分割する
複雑なUIを一つのファイルにまとめるのではなく、単機能に分けて再利用性を高める。
// Header.tsx / Footer.tsx / ProfileCard.tsx など
2. Propsを明示する
type Props = {
name: string;
bio?: string;
};
export default function ProfileCard({ name, bio }: Props) {
return (
<div>
<h2>{name}</h2>
{bio && <p>{bio}</p>}
</div>
);
}
型を明示するとエディタ補完が効き、ミスが減ります。
3. コンポーネントの粒度と再利用性を考える
| 粒度 | 例 | 再利用性 |
|---|---|---|
| 小コンポーネント | ボタン、画像、タグ | ◎高い |
| 中コンポーネント | カード、フォーム、プロフィール表示 | ◯まあまあ |
| 大コンポーネント | ユーザーページ、投稿画面 | △再利用少なめ |
🔄 コンポーネントの組み合わせ例
export default function UserPage() {
return (
<>
<Header />
<ProfileSection />
<PhotoSlider />
<YouTubeBlock />
<Footer />
</>
);
}
Header, Footer, ProfileSection, YouTubeBlock などを1つずつパーツ化することで、ページの保守性・再利用性が向上します。
⚠️ よくあるエラーや注意点
| エラー/現象 | 原因と対策 |
|---|---|
useState is not defined | use client を忘れている（クライアントコンポーネントにのみ使える） |
Cannot read properties of undefined | propsを明示していない or 初期値が未定義 |
React component must start with an uppercase letter | 関数名が小文字（例：function header()）になっている |
| コンポーネントが再レンダリングされない | useState や useEffect を適切に使っていない可能性あり |
| スタイルが当たらない | クラス名の誤記、TailwindやCSS Moduleの指定ミス |
📁 コンポーネントの構成ディレクトリ（例）
/components
├── Header.tsx
├── Footer.tsx
├── Button.tsx
├── UserProfileSection.tsx
└── YouTubeEmbedBlock.tsx
→ 一つの /components/ フォルダに集約しておくと整理しやすくなります。
🌍 まとめ：Next.jsにおけるコンポーネントの本質
- Next.jsではサーバーコンポーネントがデフォルト
- ユーザーの操作を扱うときは
use clientを付けてクライアントコンポーネントにする - 小さく、再利用しやすく、保守性を意識して分ける
- propsと型定義を丁寧に書くことでバグを減らせる
✏️ こんな時に役立つ
- サイト全体に同じUI（Header、Footerなど）を使い回したいとき
- ユーザー固有の情報を動的に表示したいとき
- SNSリンクや写真スライダーなどを部品化したいとき
- 他人が見ても読みやすく、拡張しやすい設計にしたいとき
Next.jsは自由度が高い分、「コンポーネントの設計力」が完成度に直結します。
はじめのうちは慣れが必要ですが、UIを「パーツ」として組み立てる意識を持てば、どんどん楽しくなるはずです！
