ReactとNext.jsで作るモダンWebアプリ完全ガイド

2025年11月26日

佐藤直哉

「もうjQueryは古い」って言われて、人生変わった話

2022年の秋、衝撃的な言葉を聞いた。

クライアントとの打ち合わせで、「今回はReactで作ってもらえますか？jQueryはちょっと…」

そのとき、私はまだjQueryとPHPでゴリゴリ案件をこなしてた。20年近くWebエンジニアやってて、それなりに稼げてた。でも、その一言で気づいた。「時代が変わってる」って。

正直、最初は抵抗があった。「今のやり方で十分稼げてるのに、なんで新しいこと覚えなきゃいけないんだ」って。40代で新しい技術を学ぶのって、けっこう腰が重い。

でもその日の夜、クラウドワークスで「React」って検索してみた。案件数、2,500件以上。しかも単価が高い。jQueryの案件より1.5倍から2倍。

「これはヤバい」

そう思って、その週末からReactの学習を始めた。最初は全然わからなかった。「コンポーネント？状態管理？なにそれ？」状態。でも、1ヶ月くらい必死に勉強したら、なんとなく見えてきた。

深夜の自宅で、Reactの公式ドキュメントを読みながらコードを書く40代男性の線画イラスト

で、2ヶ月後。初めてのReact案件を取った。企業サイトのリニューアル。報酬35万円。作業時間40時間。時給8,750円。今までの倍以上。

それから1年半。今はReactとNext.jsの案件がメイン。月の副業収入が40万円を超えてる。しかも、作業時間は以前より短い。コードが再利用できるから、効率が段違い。

この記事では、「ReactとNext.jsって何？」「どうやって学べばいいの？」「本当に稼げるの？」って思ってる人に向けて、学習ロードマップと案件獲得の方法を具体的に話していく。

プログラミング学習してる人、Web制作で副業したい人、技術を更新したいエンジニア。ReactとNext.jsは、今一番需要がある技術スタックの一つ。案件の単価も高い。学習コストに見合う、いやそれ以上のリターンがある。

実際、私がメンターしてる受講生の中にも、React学習を始めて半年で月15万円稼いでる人がいる。特別な才能は要らない。正しい学習方法と、正しい案件の取り方を知ってれば、誰でも到達できる。

なぜReactとNext.jsが今必須スキルなのか

Reactは求人市場で圧倒的シェア

プログラミング言語・フレームワークの求人調査を見ると、Reactは常にトップ3に入ってる。2024年の調査だと、フロントエンド案件の約60%がReactを採用してる。

これ、どういう意味かわかる？

「Reactができれば、案件の選択肢が6割増える」ってこと。jQueryやVanilla JSだけだと、残りの4割しか選べない。しかもその4割は、単価が低い傾向がある。

実際、クラウドワークスで検索してみると：

jQuery案件：平均単価 10～20万円
React案件：平均単価 20～40万円
Next.js案件：平均単価 30～60万円

同じ工数でも、使う技術によって単価が2倍以上変わる。

私が最初にReact案件を取ったときも、競合は5人いたけど、「React実務経験あり」って人は私だけだった。学習期間2ヶ月で「実務経験」って言えるのか微妙だったけど、ポートフォリオ見せたら即採用。

Next.jsは企業の本命フレームワーク

Reactを学んだ人が次に行き着くのがNext.js。これ、Reactのフレームワークで、めちゃくちゃ便利。

何が便利かっていうと：

SEO対策が簡単（サーバーサイドレンダリング）
ページ遷移が爆速（プリフェッチ）
画像最適化が自動
APIルートが作れる（バックエンド不要）
デプロイが超簡単（Vercel）

企業サイト、ECサイト、メディアサイト…ほぼすべてのWebサイトで使える。だから企業が採用してる。

実際、最近の案件の7割がNext.jsを指定してくる。「Reactできます」だけじゃなくて、「Next.jsできます」って言えると、案件の幅が一気に広がる。

私の場合、Next.js案件の平均単価は45万円くらい。工数は20～30時間。時給換算で15,000円～22,500円。jQueryの時代には考えられなかった単価。

モダンなコードが書けると評価される

React/Next.jsができると、「この人、技術のキャッチアップできるんだな」って評価される。これが意外と大きい。

クライアントは、古い技術で作られたサイトのメンテナンスに困ってる。「jQueryで作ったサイト、誰もメンテできなくて困ってる」って相談、めちゃくちゃ多い。

だから、モダンな技術で作れるエンジニアは重宝される。しかも、継続案件になりやすい。

私が今持ってる継続案件の内訳：

ECサイトの機能追加（Next.js）：月15万円
企業サイトの保守・運用（React）：月10万円
SaaSアプリの開発（Next.js + TypeScript）：月25万円

合計：月50万円の安定収入

これ全部、React/Next.jsの案件。古い技術だと、こういう継続案件は取りにくい。

カフェでノートPCを開き、クライアントから継続契約のメールを確認して喜ぶ30代女性の線画イラスト

将来性がある

React/Next.jsは、今後も需要が伸び続ける。理由は明確。

Metaが開発してる（Facebook/Instagram）。Vercelが全力でサポートしてる。大企業が採用してる（Netflix、Airbnb、Uber）。エコシステムが充実してる。

つまり、「すぐに廃れる」ことはない。学習に投資した時間は、長期的にリターンがある。

私が2022年に学習始めたとき、「もう遅いかな」って思ってた。でも全然そんなことなかった。むしろ、案件は増え続けてる。

今から学び始めても、全く遅くない。というか、「今やらないと取り残される」ってレベル。

React/Next.jsで取れる副業案件の種類と単価

コーポレートサイト制作

一番取りやすい案件タイプ。企業の公式サイトをNext.jsで作る仕事。

具体例：

中小企業の公式サイト
スタートアップのランディングページ
士業事務所のサイト
店舗の予約サイト

作業内容：

デザインカンプ（Figma/XD）を受け取る
Next.jsでコーディング
お問い合わせフォームの実装
CMSの導入（microCMS等）
SEO設定
Vercelにデプロイ

これ、初心者でも取りやすい。私の初案件もこれだった。

実際の案件例：

【案件内容】
コンサルティング会社の公式サイト制作
予算：30～40万円
納期：1ヶ月

【求められる成果物】
- トップページ + 5ページ
- お問い合わせフォーム
- ブログ機能（CMS連携）
- レスポンシブ対応
- SEO対策

使う技術：

Next.js（App Router）
TypeScript
Tailwind CSS
microCMS（ヘッドレスCMS）
Vercel（デプロイ）

作業時間の目安：25～35時間
時給換算：8,500～16,000円

これくらいの案件なら、React/Next.js学習3ヶ月で取れる。

ECサイト・予約サイト構築

難易度は上がるけど、単価も上がる。ショッピングカートや予約システムを実装する案件。

具体例：

オンラインショップ
美容室の予約サイト
イベント申込サイト
メンバーシップサイト

作業内容：

商品管理システムの実装
カート機能
決済システム連携（Stripe等）
会員登録・ログイン
注文管理画面
メール通知機能

実際の案件例：

【案件内容】
ハンドメイド商品のECサイト構築
予算：60～80万円
納期：2ヶ月

【求められる成果物】
- 商品一覧・詳細ページ
- カート・決済機能
- 会員登録・マイページ
- 注文管理画面（管理者用）
- 在庫管理機能

使う技術：

Next.js
TypeScript
Prisma（ORM）
PostgreSQL
Stripe（決済）
NextAuth（認証）

作業時間の目安：50～70時間
時給換算：8,500～16,000円

この辺になると、半年くらいの学習と実務経験が必要。でも、一度作れるようになると、テンプレート化して効率化できる。

SaaSアプリケーション開発

これが一番高単価。管理画面とか、業務システムとか。

具体例：

顧客管理システム
タスク管理ツール
社内ダッシュボード
予約管理システム
データ分析ツール

作業内容：

要件定義のサポート
データベース設計
API設計・実装
フロントエンド実装
認証・権限管理
テスト・デバッグ
AWS/Vercelへのデプロイ

実際の案件例：

【案件内容】
不動産会社向け物件管理システム
予算：100～150万円
納期：3ヶ月

【求められる成果物】
- 物件登録・編集機能
- 検索・絞り込み機能
- 顧客管理機能
- 案内予約機能
- 売上レポート機能
- PDF出力機能

使う技術：

Next.js
TypeScript
tRPC（型安全なAPI）
Prisma + PostgreSQL
AWS（S3/Lambda）
Vercel

作業時間の目安：80～120時間
時給換算：8,300～18,750円

これは経験1年以上じゃないと厳しい。でも、一度作ると継続保守案件になりやすい。

コワーキングスペースで、複雑なコードを書きながら集中している20代男性の線画イラスト

既存サイトのReact/Next.js移行

最近増えてる案件。jQueryで作られた古いサイトを、React/Next.jsで作り直す仕事。

具体例：

WordPress → Next.js + HeadlessCMS
jQuery → React
レガシーなPHP → Next.js + API

これ、めっちゃ需要ある。企業は古いサイトのメンテに困ってる。でも、社内にモダンな技術がわかる人がいない。

作業内容：

既存サイトの機能を洗い出し
設計書作成
Next.jsで再実装
データ移行
動作確認・テスト
段階的な切り替え

実際の案件例：

【案件内容】
WordPressサイトのNext.js移行
予算：80～100万円
納期：2.5ヶ月

【求められる成果物】
- 既存機能の完全再現
- 表示速度の改善（3秒→1秒以下）
- SEO設定の引き継ぎ
- CMS（microCMS等）の導入
- 移行手順書

使う技術：

Next.js
TypeScript
microCMS/Contentful
Vercel
場合によってWordPress REST API

作業時間の目安：60～80時間
時給換算：10,000～16,600円

これ、単価高いし、継続保守案件になりやすいから、めちゃくちゃおすすめ。

機能追加・保守案件

既存のReact/Next.jsプロジェクトに機能を追加する案件。

具体例：

新しいページの追加
フォーム機能の実装
管理画面の改修
パフォーマンス改善
バグ修正

これは時間単価で契約することが多い。

実際の案件例：

【案件内容】
Next.jsサイトの機能追加・保守
時給：5,000～8,000円
稼働：週10時間程度

【主な作業】
- 新機能の実装（月2～3件）
- 既存機能の改修
- バグ対応
- パフォーマンス改善

これが安定収入の柱になる。私も3社と保守契約してて、合計で月30万円くらいになってる。

React/Next.js 副業で稼ぐための学習ロードマップ

ステップ1：HTML/CSS/JavaScriptの復習（2週間）

React始める前に、基礎固め。すでにWeb制作やってる人なら飛ばしてもOK。

確認すべきこと：

HTML5の基本タグ
CSSのFlexbox/Grid
JavaScriptのES6構文（アロー関数、分割代入、テンプレートリテラル）
非同期処理（Promise/async await）
DOM操作の基礎

学習リソース：

MDN Web Docs（無料、最高の資料）
JavaScript Primer（無料、日本語）
Progate（有料だけど初心者向け）

実践課題：

// これが理解できればOK
const users = [
  { id: 1, name: '田中', age: 25 },
  { id: 2, name: '佐藤', age: 30 },
  { id: 3, name: '鈴木', age: 28 }
];

// 配列操作
const names = users.map(user => user.name);
const adults = users.filter(user => user.age >= 30);

// 非同期処理
const fetchData = async () => {
  const response = await fetch('https://api.example.com/users');
  const data = await response.json();
  return data;
};

ここがしっかりしてないと、React入っても苦労する。焦らず基礎固めよう。

ステップ2：Reactの基礎（1ヶ月）

ここからが本番。Reactの基本を学ぶ。

学ぶこと：

コンポーネントの概念
JSX
Props（親から子へのデータ受け渡し）
State（状態管理）
Hooks（useState、useEffect）
イベント処理
リスト表示（map）

学習リソース：

React公式チュートリアル（無料、最重要）
Udemy「モダンJavaScriptの基礎から学ぶReact完全ガイド」
YouTube「Reactチュートリアル」
ZennやQiitaの記事

実践課題：

// Todoアプリを作る
import { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = () => {
    setTodos([...todos, { id: Date.now(), text: input }]);
    setInput('');
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <input 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
      />
      <button onClick={addTodo}>追加</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => deleteTodo(todo.id)}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

これができたら、Reactの基本はOK。次に進もう。

私がメンターしてる受講生で、この段階で「Reactでポートフォリオサイト作成」って案件（10万円）を取った人がいる。基礎さえできれば、簡単な案件は取れる。

ステップ3：Next.jsの基礎（3週間）

Reactができたら、Next.jsへ。ここで一気に実用性が上がる。

学ぶこと：

App Router（最新の推奨方式）
ルーティング（ファイルベース）
Server Components / Client Components
データフェッチ（fetch、SWR）
動的ルーティング
Metadata API（SEO）
画像最適化（next/image）

学習リソース：

Next.js公式ドキュメント（日本語あり）
Udemy「Next.js入門」
Vercelの公式テンプレート
YouTube「Next.js App Router完全ガイド」

実践課題：

// app/page.jsx
export default async function Home() {
  // サーバーサイドでデータ取得
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return (
    <div>
      <h1>ブログ記事一覧</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`}>
              {post.title}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

これでブログサイトとか、企業サイトが作れるようになる。

自宅のデスクで、Next.jsのドキュメントを読みながらメモを取る30代女性の線画イラスト

ステップ4：TypeScript導入（2週間）

これ、最初は飛ばしてもいいんだけど、案件取るなら必須。というか、TypeScript使わないと採用されない案件が増えてる。

学ぶこと：

基本的な型（string、number、boolean）
配列とオブジェクトの型
インターフェース（interface）
ジェネリクス
React + TypeScriptの型定義

学習リソース：

TypeScript公式ハンドブック
サバイバルTypeScript（無料、日本語）
Udemy「TypeScript入門」

実践課題：

// コンポーネントの型定義
interface User {
  id: number;
  name: string;
  email: string;
}

interface UserCardProps {
  user: User;
  onDelete: (id: number) => void;
}

function UserCard({ user, onDelete }: UserCardProps) {
  return (
    <div>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <button onClick={() => onDelete(user.id)}>削除</button>
    </div>
  );
}

最初は面倒に感じるけど、慣れたら手放せなくなる。バグが激減する。

ステップ5：実践プロジェクト作成（1ヶ月）

ここが一番重要。ポートフォリオを作る。これがあるかないかで、案件の取りやすさが5倍変わる。

作るべきプロジェクト：

ポートフォリオサイト

自己紹介ページ
スキル一覧
制作実績
お問い合わせフォーム
Next.js + TypeScript + Tailwind CSS
Vercelにデプロイ

ブログサイト

記事一覧・詳細ページ
カテゴリ・タグ機能
検索機能
CMSと連携（microCMS等）
Next.js + TypeScript

簡単なWebアプリ

Todo管理
家計簿アプリ
読書記録
データベース連携（Supabase等）

私のポートフォリオ例：

「Next.jsで作った個人ブログ」（GitHub + 本番URL）
「レシピ共有サイト」（Next.js + Supabase）
「タスク管理アプリ」（React + TypeScript + Firebase）

これらをGitHubで公開して、クラウドソーシングのプロフィールに載せた。提案の採用率が3倍になった。

注意点：完璧を目指さない

学習で一番ダメなのは、「完璧になるまで案件取らない」ってやつ。

私の経験：

学習開始：2022年10月
初案件獲得：2022年12月（2ヶ月後）
月15万円達成：2023年3月（5ヶ月後）
月40万円達成：2023年9月（11ヶ月後）

最初の案件、めちゃくちゃ不安だった。「本当にできるのか？」って。でも、やってみたらできた。わからないことはその場で調べながら進めた。

クライアントも、完璧なコードを求めてるわけじゃない。「動く」「期限を守る」「コミュニケーションがちゃんと取れる」。これができれば、仕事は回る。

だから、基礎ができたら、すぐ案件取りに行こう。実践で学ぶのが一番早い。

副業案件の取り方と単価交渉のコツ

クラウドソーシングでの戦い方

初心者が最初に使うべきプラットフォーム。

主要サービス：

クラウドワークス（案件数が多い）
ランサーズ（企業案件が多い）
ココナラ（スキル販売型）

プロフィールの書き方

悪いプロフィール：

Reactができます。Next.jsも勉強中です。
よろしくお願いします。

良いプロフィール：

【経歴】
Web制作歴5年、React/Next.js案件15件対応

【得意分野】
・コーポレートサイト制作（Next.js + TypeScript）
・WordPressからNext.jsへの移行
・既存サイトのパフォーマンス改善

【対応可能な技術】
・Next.js（App Router）
・React（Hooks、Context API）
・TypeScript
・Tailwind CSS / CSS Modules
・microCMS / Contentful
・Vercel / AWS

【ポートフォリオ】
https://my-portfolio.com
https://github.com/username

【稼働時間】
平日夜 + 土日、週20時間程度

【納期】
ご相談ください（スピード対応可能）

これだけで、スカウトが来るようになる。

提案文の書き方

悪い提案文：

React/Next.jsができます。よろしくお願いします。

良い提案文：

お世話になります。貴社のコーポレートサイト制作の件、拝見いたしました。

【提案内容】
・Next.js + TypeScriptでの実装
・レスポンシブ対応（PC/タブレット/スマホ）
・お問い合わせフォーム実装
・microCMSでのブログ機能
・Vercelでの高速配信
・Google Analytics設定

【類似実績】
コンサルティング会社様のサイト制作（Next.js）
https://example.com
※表示速度1秒以下、Lighthouse100点達成

【スケジュール】
要件定義：3日
デザインカンプ確認：1日
実装：2週間
テスト・修正：3日
合計：3週間で納品可能

【金額】
35万円（税込）
※初回打ち合わせは無料です

ご検討のほど、よろしくお願いいたします。

この提案文で、採用率が劇的に上がった。

初心者が狙うべき案件：

予算：20～40万円
納期：3週間以上
「React/Next.js」と明記されてる
コーポレートサイト、LP制作系

避けるべき案件：

予算が異常に低い（10万円以下で複雑な案件）
納期が短すぎる（1週間以内）
要件が曖昧
「相場がわからないので教えてください」系

クライアントとオンラインでミーティング、画面共有しながら説明する40代男性の線画イラスト

副業エージェントの活用

経験を積んだら、エージェント使うべき。単価が全然違う。

主要エージェント：

レバテックフリーランス（最大手、高単価）
ITプロパートナーズ（週2日～OK）
クラウドテック（リモート案件豊富）
フリエン（直接契約、手数料安い）
シューマツワーカー（週末副業特化）

エージェントのメリット：

営業不要（案件を紹介してくれる）
単価が高い（月50～100万円）
契約手続きを代行
継続案件が多い
スキルアップの相談ができる

エージェントに登録するタイミング：

React/Next.js実務経験半年以上
ポートフォリオが3つ以上
週10時間以上の稼働が可能
TypeScriptが使える

私がエージェントに登録したのは、副業開始から半年後。クラウドソーシングで7件くらい案件をこなしてから。

登録したら、すぐに月単価70万円（週2.5日稼働）の案件を紹介された。時給換算で14,000円。クラウドソーシングの倍。

エージェント面談での自己PR例：

【経験】
・React/Next.js案件：12件対応
・WordPress → Next.js移行：3件
・主な業界：BtoB SaaS、コーポレートサイト、EC

【スキルセット】
・Next.js（App Router / Pages Router）
・React（Hooks、Context、Redux）
・TypeScript
・Tailwind CSS / Chakra UI
・Prisma / Drizzle ORM
・Supabase / Firebase
・Git / GitHub
・Vercel / AWS

【稼働条件】
・週2～3日稼働希望
・フルリモート希望
・平日夜 + 土日の対応可能

【ポートフォリオ】
GitHub：https://github.com/username
個人サイト：https://my-portfolio.com

単価交渉の技術

単価交渉、苦手な人多いけど、ここで収入が倍変わる。

交渉のタイミング：

要件が明確になった後
自分の提供価値を示した後
クライアントが「お願いしたい」と言った後

交渉の流れ：

クライアント：「予算は25万円で考えています」

悪い返答：

わかりました。25万円でやります。

良い返答：

ありがとうございます。
要件を確認したところ、想定作業時間は30～35時間です。

私の通常単価は時給8,000円なので、
24～28万円が適正かと考えております。

今回は初めてのお取引ということで、
27万円でいかがでしょうか？

ただし、以下のサービスを追加させていただきます：
・納品後2週間の無料サポート
・簡単な修正は3回まで無料
・Vercelへのデプロイ設定
・運用マニュアル付き

ご検討いただけますと幸いです。

これで、8割のクライアントはOKしてくれる。

単価を上げる戦略：

実績を積む

最初の5件は相場より少し安くてもOK
評価5.0を集める
6件目から徐々に単価を上げる

専門性を出す

「Next.js移行専門」
「高速化専門」
「BtoB SaaS開発専門」専門性があると、単価は1.5～2倍になる。

スピードで勝負

「通常1ヶ月のところ、3週間で納品できます」
早く納品 = 高単価を正当化できる

付加価値を提供

単なるコーディングだけじゃなく、SEO設定も
パフォーマンス最適化（Lighthouse100点）
運用マニュアル付き
保守サポート1ヶ月無料

これらを実践して、私の平均単価は：

開始時：時給6,000円
半年後：時給9,000円
1年後：時給13,000円
現在：時給16,000円

継続案件の獲得方法

単発より継続案件の方が圧倒的に楽。営業の手間が省ける。

継続案件につながる行動：

期待を超える

納期より3日早く納品
追加で軽微な機能も実装
わかりやすいドキュメント

次の提案をする

納品時に「次は〇〇もできますよ」
「月額保守サポートもできます」
「機能追加のご提案があります」

定期契約を提案

「月額15万円で、機能追加 + 保守対応します」
クライアントは予算が立てやすい
こちらも収入が安定する

私の継続案件例：

ECサイトA社：月15万円（機能追加・保守）
企業サイトB社：月10万円（コンテンツ更新・保守）
SaaSアプリC社：月25万円（機能開発）

合計：月50万円の安定収入

これが副業収入の8割を占めてる。

React/Next.jsの実践テクニック

パフォーマンス最適化は必須

クライアントが一番喜ぶのが、サイトの高速化。

やるべきこと：

画像最適化

import Image from 'next/image';

// 悪い例
<img src="/hero.jpg" alt="ヒーロー画像" />

// 良い例
<Image 
  src="/hero.jpg" 
  alt="ヒーロー画像"
  width={1200}
  height={600}
  priority
/>

これだけで表示速度が2～3倍速くなる。

動的インポート

// 重いコンポーネントは遅延読み込み
import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>読み込み中...</p>
});

メタデータ設定

// app/page.jsx
export const metadata = {
  title: '会社名 - サービス説明',
  description: 'SEO対策したい説明文',
  openGraph: {
    title: 'SNSシェア用タイトル',
    description: 'SNSシェア用説明',
    images: ['/og-image.jpg'],
  },
};

これで、Lighthouseスコア90点以上を目指す。100点取れたら、クライアントめっちゃ喜ぶ。

TypeScriptで型安全に

TypeScriptは最初面倒だけど、バグが激減する。

実践例：

// APIレスポンスの型定義
interface Post {
  id: number;
  title: string;
  content: string;
  publishedAt: string;
}

// コンポーネントのProps型定義
interface PostListProps {
  posts: Post[];
  onSelectPost: (post: Post) => void;
}

function PostList({ posts, onSelectPost }: PostListProps) {
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id} onClick={() => onSelectPost(post)}>
          {post.title}
        </li>
      ))}
    </ul>
  );
}

型があると、補完が効くし、バグも防げる。慣れたら手放せない。

エラーハンドリングをちゃんとやる

これ、意外とできてない人多い。でも、プロの仕事はエラー処理までちゃんとやる。

実践例：

'use client';
import { useState } from 'react';

function ContactForm() {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        body: JSON.stringify({ /* データ */ }),
      });

      if (!response.ok) {
        throw new Error('送信に失敗しました');
      }

      setSuccess(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setIsLoading(false);
    }
  };

  if (success) return <p>送信完了しました！</p>;

  return (
    <form onSubmit={handleSubmit}>
      {error && <p className="error">{error}</p>}
      {/* フォームフィールド */}
      <button disabled={isLoading}>
        {isLoading ? '送信中...' : '送信'}
      </button>
    </form>
  );
}

ローディング、エラー、成功の3つの状態を管理する。これができると、ユーザー体験が格段に良くなる。