3分で整理する Next.js のための React 超入門

2025/11/23 · 7 min read

目標：Next.js の page.tsx を「だいたい読める・ちょっと書ける」レベル までの React を一気に整理。

1. React コンポーネントと JSX の基本

React の「ページ」はただの関数です。

// App.tsx（React 単体の例）
const App = () => {
  return <h1>Hello React</h1>;
};

export default App;

関数コンポーネント：const App = () => { ... }
JSX：<h1>...</h1> の部分（HTML っぽい見た目の JS 構文）

Next.js のページも中身はほぼ同じです。

// app/page.tsx（Next.js のトップページ）
export default function Page() {
  return <h1>Hello Next.js</h1>;
}

「関数コンポーネントを export default しておくと、それがページになる」という理解でOKです。

2. props でデータを渡す（親→子）

親コンポーネントから子コンポーネントへ値を渡すのが props です。

// Greeting.tsx
type GreetingProps = {
  name: string;
};

export const Greeting = ({ name }: GreetingProps) => {
  return <p>こんにちは、{name} さん！</p>;
};

使う側：

// App.tsx
import { Greeting } from "./Greeting";

const App = () => {
  return (
    <div>
      <Greeting name="rinta" />
      <Greeting name="山田" />
    </div>
  );
};

export default App;

ポイント：

<Greeting name="rinta" /> → name という props を文字列で渡している
({ name }: GreetingProps) → props.name を分割代入で受け取っている

Next.js のコンポーネントでも props の受け渡しパターンは同じ です。

Props 型の書き方メモ（TypeScript）

type でも interface でも OK。小さなコンポーネントなら type がシンプル。
props は「受け取る形」に合わせて型を付ける（例：{ name, age }: UserProps）。
Next.js でも型定義の置き場所は自由だが、1ファイル1コンポーネントなら同じファイルに書いてよい。

3. `useState` と `onClick` で動く UI（カウンター）

React が「ただのテンプレート」と違うのは、状態（state） を持てること。

import { useState } from "react";

export const Counter = () => {
  const [count, setCount] = useState<number>(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <button onClick={handleClick}>
      カウント: {count}
    </button>
  );
};

useState(0) → count（現在の値）と setCount（更新する関数）をくれる
onClick={handleClick} → ボタンがクリックされたら handleClick を実行
setCount(count + 1) → state を更新 → コンポーネントが再レンダリング → 表示も更新

Next.js のクライアントコンポーネントだと、こんな形になります。

// app/page.tsx
"use client";

import { useState } from "react";

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

  return (
    <main>
      <button onClick={() => setCount(count + 1)}>
        カウント: {count}
      </button>
    </main>
  );
}

"use client"; が付くだけで、中身はほぼ同じです。

4. フォーム入力：`value` + `onChange`

React では、入力フォームも state で管理する のが基本です。

import { useState } from "react";

export const NameForm = () => {
  const [name, setName] = useState<string>("");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

  return (
    <div>
      <input
        value={name}
        onChange={handleChange}
        placeholder="名前を入力"
      />
      <p>こんにちは、{name || "ゲスト"} さん</p>
    </div>
  );
};

value={name} → input の中身は name state で決まる
onChange={handleChange} → 入力が変わるたびに呼ばれる
setName(e.target.value) → 入力値で state を更新

「UIは常に state の結果」 というのが React の基本的な考え方です。

5. 配列 state と `.map()` + `key`（TODOリスト）

一覧表示は 配列 + .map() のパターンになります。

import { useState } from "react";

export const TodoList = () => {
  const [items, setItems] = useState<string[]>(["買い物", "勉強"]);

  const handleAdd = () => {
    setItems([...items, `タスク${items.length + 1}`]);
  };

  return (
    <div>
      <button onClick={handleAdd}>追加</button>
      <ul>
        {items.map((text) => (
          <li key={text}>{text}</li>
        ))}
      </ul>
    </div>
  );
};

useState<string[]>(...) → 「文字列の配列」を state に持つ
items.map((text) => <li key={text}>{text}</li>) → 配列から <li> を並べて表示
key={text} → React にとっての「その要素のID」。リストでは必須。

Next.js のページ内でも、このパターンがそのまま使えます。

6. `useEffect` で「初回だけ処理する」（fetch など）

API からデータを取るなどの「副作用」は useEffect に書きます。

import { useEffect, useState } from "react";

type Post = {
  id: number;
  title: string;
};

export const PostList = () => {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=5");
      const data: Post[] = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, []); // ← 依存配列が [] だと「マウント時に一回だけ」

  if (loading) return <p>読み込み中...</p>;

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

useEffect(() => { ... }, []) → コンポーネントが 初回表示されたときに一回だけ 実行
fetch(...) → ブラウザの fetch API（JSの機能）
setPosts(data) → 結果を state に保存 → 再レンダリングで一覧表示

Next.js のクライアントコンポーネントでも、使い方は同じです。

7. Next.js での位置づけ

このページで扱った React の要素は、そのまま Next.js の中でこう対応します：

export default function Page() → React 関数コンポーネント
"use client"; → useState / useEffect を使うコンポーネントの宣言
props を受け取るコンポーネント → レイアウトや UI 部品として page.tsx から呼び出される
useState, useEffect, .map() → クライアント側で動くインタラクティブな UI の基本パターン

まとめ

Next.js のコードを読むために、React でまず押さえておきたいのはこの6つです。

関数コンポーネント + JSX
props でデータを渡す
useState + onClick で動くUI
フォーム入力（value + onChange）
配列 state + .map() + key
useEffect で「初回だけ fetch する」

ここまで理解できれば、公式ドキュメントやブログ記事の Next.js サンプルコードは 「調べながらなら十分追いかけられる」レベル になっているはずです。