Cursor で React/Next.js 案件を取る｜未経験から3ヶ月で受注する実践ガイド｜codoAssist
- 著者：奥﨑 慎太郎（おくざき しんたろう）
- 肩書：コードアシスト 主催 / 株式会社SOFI 代表取締役
- 経歴：株式会社SOFI 代表取締役。Next.js 案件を月3件・実績40件超で実戦投入。Cursor + Next.js のフローを体系化。
- SNS / 関連：note ／ SOFI公式
Cursor で React/Next.js 案件を取る｜未経験から3ヶ月で受注する実践ガイド
「Next.js 案件は単価高い・でも難しそう」――副業フリーランスの認識ですが、Cursor を使えば未経験でも3ヶ月で受注可能です。本記事は、コードアシスト主催・奥﨑慎太郎がNext.js 案件を月3件・実績40件超から、Cursor 時代の実践ガイドを公開します。
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/月 |
WordPress 案件の1.5-3倍の単価。フロントエンドエンジニア向けの単価帯にアクセスできる。
未経験から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以上が現実的なライン。
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 に習慣化させる。
コツ④：型定義を最初に書く
// 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 統合も得意。
受講生Pさんが3ヶ月でNext.js案件を取った実例
受講生Pさん （38歳・元営業）の3ヶ月：
| 期間 | 状態 |
|---|---|
| 入塾1ヶ月目 | Cursor で公式チュートリアル完了・Vercel デプロイ初成功 |
| 入塾2ヶ月目 | ポートフォリオサイト Next.js で構築 |
| 入塾2ヶ月目末 | 元同僚に「Next.js でできる」と告知 |
| 入塾3ヶ月目 | 元同僚の知人から LP制作¥250,000を受注 |
「Next.js は難しいと思っていたけど、Cursor で公式チュートリアルやってみたら『日本語で指示すれば動く』と気付いた。3ヶ月で¥250,000の案件取れたのは、Cursor のおかげ。」
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 に正しい設計を委ねるのが正解。
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 が業界の現実。「最新技術スタック」が単価を上げる。
📩 「Cursor × Next.js 案件取得 完全ガイド（PDF・56ページ）」をLINE登録で配布中
3ヶ月ロードマップ・コンポーネント設計テンプレ・Supabase 連携手順・契約書テンプレを1冊に。
– Cursor で WordPress オリジナルテーマを作る7ステップ
– Cursor の Tab機能を使い倒す｜未経験者が知らない「継続予測」の威力
奥﨑 慎太郎（おくざき しんたろう）
株式会社SOFI 代表取締役 / コードアシスト 主催。Next.js 案件を月3件・実績40件超で実戦投入。Cursor + Next.js のフローを体系化。