PractiX Code Lab

Next.js × React　props の基本と実践活用

Share this post

🚪はじめに

こんにちは、管理人のTKGです。

今回は「props（プロップス）」について解説します。Reactを学び始めた人なら一度は目にするこの単語ですが、Next.js（App Router構成）を使った開発の中でも非常に重要な概念です。

この記事では、propsの基本的な使い方から、App Routerを使ったNext.jsでの実践的な活用例までを紹介します。

🎯想定読者

  • React/Next.js 初学者〜中級者
  • propsの使い方を一度整理したい方
  • App Router構成でコンポーネント設計をしている方

🧩 propsとは？

Reactにおいてpropsは、「親コンポーネントから子コンポーネントに渡すデータ」のこと。 親コンポーネントから子コンポーネントへデータを渡す手段として使われます。

const Greeting = ({ name }: { name: string }) => {
  return <p>Hello, {name}!</p>;
};

<Greeting name="Taro" />;

🤔 なぜpropsが必要なのか？

Reactの世界では、コンポーネントを組み合わせてUIを構築していきます。各コンポーネントが単なるパーツとしてだけでなく「動的なデータ」を扱えるようにするのがpropsの役割です。

たとえば、

  • 親から子にデータを渡したい（例：記事一覧 → 各記事カード）
  • 再利用可能なUI部品を作る際に、動的に表示内容を変えたい
  • イベント処理（クリック時の処理など）を外から注入したい

といったシーンでpropsが活躍します。

🛠️ よくあるpropsの使い方（基本編）

✅ 文字列や数値を渡す

MyComponent title="ようこそ" count={5} />

✅ オブジェクトを渡す

<MyComponent user={{ id: 1, name: "Hanako" }}

✅ 関数（イベントハンドラ）を渡す

<MyComponent onClick={() => alert("クリックされました")} />

🧱 Next.jsとprops：ページとコンポーネントの境界

Next.jsのApp Router（app/ディレクトリ構成）では、page.tsx がルートレベルのエントリポイントになり、そこから各コンポーネントにpropsを渡します。

// app/page.tsx
import HeroSection from "@/components/HeroSection";

export default function HomePage() {
  return <HeroSection title="ようこそ PractiX Code へ" />;
}

// components/HeroSection.tsx
type Props = {
  title: string;
};

const HeroSection = ({ title }: Props) => (
  <section>
    <h1>{title}</h1>
  </section>
);

export default HeroSection;

このように、app/page.tsxが親、各UIコンポーネントが子として、propsでデータを受け渡す構成になります。

⚙️ fetch関数との連携：サーバーコンポーネントとprops

App Routerではサーバーコンポーネントが標準となっており、直接非同期処理（fetchなど）を書くことができます。

その結果をpropsとして子コンポーネントに渡すこともできます。

// app/page.tsx
import PostList from "@/components/PostList";

export default async function HomePage() {
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();

  return <PostList posts={posts} />;
}


// components/PostList.tsx
type Props = {
  posts: { id: number; title: string }[];
};

const PostList = ({ posts }: Props) => (
  <ul>
    {posts.map((post) => (
      <li key={post.id}>{post.title}</li>
    ))}
  </ul>
);

export default PostList;

🚨 props利用時の注意点

  • propsは読み取り専用：子コンポーネントから変更はできません
  • デフォルト値が必要な場合は、?? や defaultPropsを検討
  • *型定義（TypeScript）**を導入すると安全にコーディング可能

💡 おまけ：propsの分割代入とスプレッド構文

const MyComponent = ({ title, ...props }: { title: string; [key: string]: any }) => {
  return <h1 {...props}>{title}</h1>;
};

汎用的にpropsを渡したい場合などに便利な書き方です。

🏁おわりに

今回はReactおよびNext.js（App Router構成）におけるpropsの基本とその活用方法を紹介しました。

今後は、状態管理（useState, useContext）やServer Actionsなどとの連携についても記事にまとめていこうと思います。

Share this post