Cursor で React/Next.js 案件を取る｜未経験から3ヶ月で受注する実践ガイド
# Cursor で React/Next.js 案件を取る｜未経験から3ヶ月で受注する実践ガイド
「Next.js 案件は単価高い・でも難しそう」――副業フリーランスの認識ですが、Cursor を使えば未経験でも3ヶ月で受注可能です。本記事は、コードアシスト主催・奥﨑慎太郎がNext.js 案件を月3件・実績40件超から、Cursor 時代の実践ガイドを公開します。
H2-1：React/Next.js 案件の単価相場
| 案件タイプ | 単価 |
|---|---|
| 静的 LP（Next.js + Tailwind） | ¥150,000-300,000 |
| コーポレートサイト | ¥350,000-700,000 |
| EC サイト（Stripe 連携） | ¥600,000-1,500,000 |
| 管理画面（Next.js + Supabase） | ¥500,000-1,200,000 |
| 月額顧問（保守＋機能追加） | ¥80,000-300,000/月 |
H2-2：未経験から3ヶ月でNext.js案件を取るロードマップ
月1：基礎学習
- Next.js 公式チュートリアル完了（公式ドキュメント全部）
- Vercel デプロイ1回成功
- Tailwind CSS の基礎習得
Cursor を使えば、未経験でも公式チュートリアルは1週間で完了。
月2：ポートフォリオ構築
- 自分のポートフォリオサイトを Next.js で構築
- GitHub にコードを公開
- Vercel に本番デプロイ
ポートフォリオサイトを Next.js で作っている時点で、Web制作初心者の中では上位10%。
月3：初案件取得
- 紹介経由で初案件（LP制作 ¥150,000-300,000）
- 納品 → ポートフォリオに追加
3ヶ月で初案件¥150,000以上が現実的なライン。
H2-3：Cursor で Next.js プロジェクトを高速化する5つのコツ
コツ①：プロジェクト初期化を Cursor に任せる
“` あなた：「Next.js 14 + TypeScript + Tailwind CSS + ESLint で新規プロジェクトを作成」 Cursor：npm create next-app の実行 → 必要設定を自動で “`
5分でプロジェクト雛形が完成。
コツ②：コンポーネント設計を最初に決める
“` あなた：「以下のディレクトリ構造でコンポーネントを作成：
- components/ui/Button.tsx
- components/ui/Card.tsx
- components/sections/Hero.tsx
- components/sections/Features.tsx」
Cursor：5ファイル並列で雛形生成 “`
コンポーネント分割を Cursor に任せることで、後の保守性が上がる。
コツ③：Server Components を使い分ける
Next.js 14 以降、Server Components が標準。「ユーザー操作なし → Server」「クリック・状態管理 → Client」の使い分けを Cursor に習慣化させる。
コツ④：型定義を最初に書く
“`typescript // types/user.ts type User = { id: string name: string email: string role: ‘admin’ | ‘member’ | ‘guest’ } “`
型を最初に書くと、Cursor の予測精度が3倍。実装速度が圧倒的に違う。
コツ⑤：Supabase / Firebase で BaaS を使う
中小企業案件では、自前でバックエンド構築よりBaaS（Backend as a Service）を使う方が早い：
- Supabase：PostgreSQL ベース・認証・ストレージ
- Firebase：NoSQL・リアルタイム同期
Cursor は Supabase / Firebase の SDK 統合も得意。
H2-4：受講生Pさんが3ヶ月でNext.js案件を取った実例
受講生Pさん （38歳・元営業）の3ヶ月：
| 期間 | 状態 |
|---|---|
| 入塾1ヶ月目 | Cursor で公式チュートリアル完了・Vercel デプロイ初成功 |
| 入塾2ヶ月目 | ポートフォリオサイト Next.js で構築 |
| 入塾2ヶ月目末 | 元同僚に「Next.js でできる」と告知 |
| 入塾3ヶ月目 | 元同僚の知人から LP制作¥250,000を受注 |
H2-5：Next.js 案件で失敗する3つの落とし穴
落とし穴①「複雑すぎる構成を選ぶ」
副業初心者で「Next.js + tRPC + Prisma + Auth.js + Stripe」のフルスタックを選ぶと、習得に1年かかる。最初は「Next.js + Tailwind + Supabase」のシンプル構成で十分。
落とし穴②「Vercel デプロイを後回し」
開発の早い段階でVercel に本番デプロイしておかないと、納品時のデプロイで大ハマリする。毎日 git push & Vercel自動デプロイを習慣化。
落とし穴③「Server Components / Client Components の使い分けが曖昧」
「use client」を全コンポーネントに付けて回避するのはNG。SEO・パフォーマンスが悪化。Cursor に正しい設計を委ねるのが正解。
H2-6：FAQ
Q1. React 経験ゼロでも Next.js から始めて大丈夫？ A. 大丈夫。Cursor を使えば、React の文法はAIが補完。最初は『Next.js のフレーム』だけ理解すれば十分。
Q2. WordPress と Next.js、どっちを学ぶ？ A. 両方。最初の半年は WordPress + Next.js を併用、6ヶ月後にどちらかに特化する人が多数。
Q3. Vercel の月額がかかる A. 個人プランは無料。月¥0で本番運用可能。Pro プラン（$20/月）は商用案件が増えてから検討。
Q4. Next.js は学習曲線が急？ A. 2026年現在、Cursor のおかげで学習曲線は緩やか。WordPress と同じ程度の難易度。
Q5. 案件単価が WordPress より本当に高い？ A. 本当。同じLP制作でも、WordPress ¥80,000 vs Next.js ¥250,000 が業界の現実。「最新技術スタック」が単価を上げる。
—
[CTA]
📩 「Cursor × Next.js 案件取得 完全ガイド（PDF・56ページ）」をLINE登録で配布中 3ヶ月ロードマップ・コンポーネント設計テンプレ・Supabase 連携手順・契約書テンプレを1冊に。
→ LINE登録はこちら（CTA URL要差し替え）
—
[関連記事]
—
{“@context”: “https://schema.org”, “@graph”: [{“@type”: “Article”, “headline”: “Cursor で React/Next.js 案件を取る｜未経験から3ヶ月で受注する実践ガイド”, “author”: {“@id”: “https://codoast.com/#person”}, “datePublished”: “2026-05-07”, “mainEntityOfPage”: “https://codoast.com/column/cursor-react-nextjs-anken/”}, {“@type”: “Person”, “@id”: “https://codoast.com/#person”, “name”: “奥﨑慎太郎”, “jobTitle”: “コードアシスト 主催 / 株式会社SOFI 代表取締役”}, {“@type”: “FAQPage”, “mainEntity”: [{“@type”: “Question”, “name”: “React 経験ゼロでも Next.js から始めて大丈夫？”, “acceptedAnswer”: {“@type”: “Answer”, “text”: “大丈夫。Cursor を使えば React の文法は AI が補完。最初は Next.js のフレームだけ理解すれば十分。”}}, {“@type”: “Question”, “name”: “WordPress と Next.js どっちを学ぶ？”, “acceptedAnswer”: {“@type”: “Answer”, “text”: “両方。最初の半年は併用、6ヶ月後にどちらかに特化する人が多数。”}}, {“@type”: “Question”, “name”: “Vercel の月額がかかる”, “acceptedAnswer”: {“@type”: “Answer”, “text”: “個人プランは無料。月0円で本番運用可。Pro $20/月は商用案件が増えてから検討。”}}, {“@type”: “Question”, “name”: “Next.js は学習曲線が急？”, “acceptedAnswer”: {“@type”: “Answer”, “text”: “2026年現在、Cursor のおかげで学習曲線は緩やか。WordPress と同じ程度。”}}, {“@type”: “Question”, “name”: “案件単価が WordPress より本当に高い？”, “acceptedAnswer”: {“@type”: “Answer”, “text”: “本当。同じLPでも WordPress 8万 vs Next.js 25万が業界の現実。”}}]}]}