Next.js案件の単価相場2026｜React経験者が案件タイプ別に狙う方法

「Next.jsのフリーランス案件は平均88万円」。相場を調べるとこの数字はすぐ見つかります。けれど実際に案件票を開いてみると、「App Router移行」「新規SSRサイト構築」「Server Actionsでフルスタック開発」「ヘッドレスCMS連携」と、書かれている内容がバラバラで、自分のスキルでどれに応募できるのか、どれがいくらの案件なのかが掴めない——そんな手詰まりを感じていないでしょうか。

Reactの実務経験はあって、Next.jsもPages Routerなら触れる。でも案件によって求められるものが大きく違うように見えて、「平均88万円」という1つの数字だけでは、自分が現実に通る案件と単価の対応がまったく見えてこない。これは多くのReactフリーランスが最初にぶつかる壁です。

実は、この見えにくさの正体は「Next.js案件をひとまとめの相場で考えている」ことにあります。Next.js案件は中身（案件タイプ）によって、必要なスキルの深さも単価レンジも明確に変わります。逆に言えば、案件タイプで切り分けて見れば、「自分はいまどのタイプならいくらで取れるのか」「単価を1段上げるには次にどのタイプを狙い、何を身につければいいのか」がはっきり言語化できるようになります。

本記事では、Next.js案件を5つの案件タイプに分類し、タイプごとの単価レンジ・求められるスキル・参入難易度を整理します。そのうえで、あなた自身のスキルを案件タイプに当てはめ、「今取れるタイプ」と「次に狙うタイプ」を見極めるための判断軸まで紹介します。読み終えるころには、案件選びと学習の優先順位を自分で決められる状態になっているはずです。

Next.js案件の単価相場【2026年版・全体早見表】

まずは深掘りに入る前に、Next.js案件の全体水準を1枚で把握しておきましょう。ここはあくまで概況です。本記事の主眼である「案件タイプ別の単価」は次の章以降で詳しく扱います。

2026年のNext.js案件単価の全体水準

フリーランス案件データを集計しているサービスの数値を突き合わせると、Next.js案件の単価はおおむね次のような水準です。

平均と中央値がほぼ同じ約88万円で、4件に1件は100万円を超えています。実際の案件一覧を見ても、TypeScript・SSR/SSG・App Router・Server Actionsといった要件とともに、月80万〜100万円台の単価が並んでいます（フリーランスHub（Next.js案件）、テックタレントフリーランス（Next.js案件））。

ポイントは、この水準が「React単独」のフロントエンド案件よりも明確に上のレンジに位置していることです。React案件の単価が市場でどう決まるか、Next.js需要との関係を全体像から知りたい方は、React フリーランス単価とNext.js需要の関係もあわせてご覧ください。

「平均88万円」が当てにならない理由

ここで注意したいのが、「平均88万円だから、自分も88万円で取れる」とは限らないことです。平均はあくまで全案件をならした数字であり、あなたが現実に応募して通る案件の単価とは別物だからです。

たとえば同じ「Next.js案件」でも、

• 既存サイトに機能を1つ追加するだけの改修案件
• ゼロからApp RouterでSSRサイトを設計・構築する案件
• Server ActionsやAPI Routesでバックエンドまで含めて作るフルスタック案件
• 既存のPages RouterアプリをApp Routerへ移行するリアーキテクチャ案件

では、求められるスキルの深さも責任範囲もまったく違います。当然、単価レンジも変わります。つまり「平均」を見ても、自分がどのゾーンに入るのかは判断できないのです。

だからこそ、Next.js案件は「タイプ」で切り分けて見る必要があります。次の章では、まず「なぜ案件タイプで単価が変わるのか」という構造を整理します。

なぜNext.js案件は「案件タイプ」で単価が変わるのか

案件票の内容がバラバラに見えるのは、案件によって「求められるものの軸」が違うからです。この軸を理解しておくと、後の章で扱う案件タイプ別の解説がぐっと読みやすくなります。

単価を決める3つの軸

Next.js案件の単価は、おおまかに次の3軸で決まります。

1. スキルの幅（フロント単独か、バックエンド・インフラまで含むか）

フロントエンドの実装だけで完結する案件よりも、Server ActionsやAPI Routesでバックエンドのロジックまで書く案件、さらにDB設計やデプロイ環境（Vercel・AWSなど）まで見る案件のほうが、求められるスキルの幅が広く、単価も上がります。「1人で広い範囲をカバーできる人」ほど高く評価されるためです。

2. 技術の新しさ（Pages RouterかApp Router/RSC/Server Actionsか）

Next.jsはApp Router・React Server Components（RSC）・Server Actionsといった新しいアーキテクチャが標準になりつつあります。Pages Routerの経験だけでも案件はありますが、App RouterやRSCの実務経験があると応募できる案件の幅が広がり、単価も一段上がる傾向があります。新しいパラダイムは実務でこなせる人がまだ相対的に少なく、希少性が単価に反映されるからです。

3. 責任範囲（実装のみか、設計・アーキテクチャ判断まで含むか）

指示された仕様を実装するだけの案件と、「この機能はSSRとCSRのどちらにすべきか」「キャッシュ戦略をどう設計するか」といったアーキテクチャ判断まで任される案件では、後者のほうが単価が高くなります。設計判断は失敗したときの影響が大きく、その分の責任に対して対価が払われるためです。

この3軸を頭に置くと、「単価が高い案件＝スキルの幅が広く、新しい技術を使い、設計判断まで含む案件」だと整理できます。

2026年の市場トレンド｜App Router・Server Actionsの標準化

2026年時点の市場では、React案件の多くがNext.js併用を前提としており、フロントエンドエンジニアにとってNext.jsの実務経験はほぼ必須スキルになりつつあります。

なかでも単価に効くのがApp RouterとServer Actionsの実務経験です。新規案件の多くがApp Routerを前提に設計されるようになり、これらを「学習レベル」ではなく「実務で使ったことがある」状態にできているかどうかが、応募できる案件タイプと単価ゾーンの分かれ目になっています。Pages Router中心の改修案件にとどまるか、App Router・Server Actionsを使う新規・フルスタック案件に踏み込めるかで、提示される単価には実務上はっきりした差が出ます（Next.jsで高単価案件を狙う方法（mijica））。

この前提を踏まえて、次の章ではいよいよ本記事の核である「案件タイプ別の単価相場と必要スキル」を見ていきます。

Next.js案件タイプ別の単価相場と必要スキル

ここが本記事の中核です。Next.js案件を5つのタイプに分類し、それぞれの単価レンジ・典型的な業務内容・求められるスキルの深さ・参入難易度を整理します。

各タイプで、「Reactしかできない人」「Pages Router止まりの人」「App Router・Server Actionsまでできる人」がそれぞれ取れるのか取れないのか、線引きを意識して読んでみてください。なお、ここで示す単価レンジは前章までの市場データ（平均約88.9万円、100万円超が約26.9%）をもとにした目安であり、稼働時間・地域・契約形態・あなたの実績によって前後します。

タイプA｜既存サイトの改修・機能追加

典型的な業務：すでに動いているNext.jsサイトに、新しいページや機能を追加する、UIを改修する、バグを修正する、といった保守・拡張系の案件です。Pages Routerで作られた既存プロジェクトも多く、既存コードの読解力が問われます。

求められるスキル：React（hooks・コンポーネント設計）とTypeScriptの実務レベル、Pages Routerの理解。App RouterやServer Actionsは必須でないことが多く、「既存のやり方に合わせて手を動かせる」ことが重視されます。

単価レンジの目安：下〜中ゾーン（おおむね月60万〜80万円台）。

参入難易度：低め。Reactの実務経験があれば応募できる案件が多く、Next.js案件の入り口として最も狙いやすいタイプです。Pages Router中心の人でも十分に通ります。逆に言えば、スキルの幅・新しさ・責任範囲のいずれも限定的なため、単価の上限は他のタイプより低くなりがちです。

タイプB｜新規SSR/SSGサイト構築

典型的な業務：コーポレートサイト、メディア、ECのフロントなどを、Next.jsでゼロから構築する案件です。SEOやページ表示速度が重視されるため、SSR（サーバーサイドレンダリング）やSSG（静的サイト生成）を適切に使い分ける設計が求められます。2026年の新規案件はApp Routerを前提とするものが増えています。

求められるスキル：React・TypeScriptに加え、App Routerでのルーティング・レイアウト設計、SSR/SSG/ISRの使い分け、メタ情報やパフォーマンスを意識した実装。デザインカンプ（Figmaなど）からの実装力も問われます。

単価レンジの目安：中ゾーン（おおむね月80万〜100万円前後）。

参入難易度：中。App Routerの実務経験があると一気に通りやすくなります。Pages Routerしか経験がない場合は、まずApp Routerでの新規構築を小さくでも経験しておくことが、このタイプに入る鍵になります。Reactだけ・Pages Router止まりの人にとっては、ここが最初の「壁」になりやすいゾーンです。

タイプC｜Server Actions・API Routesを含むフルスタック開発

典型的な業務：フロントエンドだけでなく、Server ActionsやAPI Routesを使ってフォーム処理・データ取得・認証などのサーバーサイドロジックまで担当する案件です。DBアクセス（Prismaなどを介したCRUD）やバックエンドAPIとの連携を含むこともあります。

求められるスキル：App Router・RSC・Server Actionsの実務経験、API設計の基礎、DBやORMの基礎知識、認証・セキュリティの理解。フロントとサーバーを横断して考えられることが求められます。

単価レンジの目安：中〜上ゾーン（おおむね月90万〜110万円台、内容によってはそれ以上）。

参入難易度：やや高。「フロントしかやってこなかった人」がバックエンドの責任範囲まで広げる必要があるため、ここで単価が一段上がります。Reactフリーランスが単価を伸ばす際の主戦場になりやすいタイプです。

タイプD｜ヘッドレスCMS・Jamstack構築

典型的な業務：microCMS・Contentful・SanityといったヘッドレスCMSとNext.jsを連携させ、コンテンツ更新可能なサイト基盤を構築する案件です。メディアやオウンドメディア、コーポレートサイトで採用されることが多く、ビルド・配信（Vercelなど）まで含めた設計が求められます。

求められるスキル：App RouterでのSSG/ISR、ヘッドレスCMSのAPI連携、プレビュー機能や差分ビルドの実装、コンテンツモデリングの理解。CMS側の設計に踏み込む案件では、編集者の運用まで考えた提案力も評価されます。

単価レンジの目安：中〜上ゾーン（おおむね月85万〜105万円前後）。

参入難易度：中〜やや高。CMS連携の経験があると差別化しやすく、メディア系の継続案件につながりやすいのが特徴です。タイプB（新規SSR/SSG構築）の延長として狙うと移行しやすいタイプです。

タイプE｜App Router移行・リアーキテクチャ／パフォーマンス改善

典型的な業務：既存のPages RouterアプリをApp Routerへ移行する、レンダリング戦略を見直してCore Web Vitalsを改善する、大規模化したコードベースをリアーキテクチャする、といった最も難度の高い案件です。既存システムの制約を理解したうえで、移行方針や設計判断を主導することが求められます。

求められるスキル：App Router・RSC・Server Actionsの深い理解、移行戦略の設計力、パフォーマンス計測・改善（バンドルサイズ・キャッシュ戦略・レンダリング最適化）、既存コードの読解とリファクタリング力。技術選定やアーキテクチャ判断を任されるため、説明力・提案力も問われます。

単価レンジの目安：上ゾーン（おおむね月100万円超、高難度案件では130万円以上も）。実際、Next.js案件の約26.9%が月100万円以上で、その多くは設計・レビュー・周辺技術まで含む案件です（CoreJobs（Next.js案件））。

参入難易度：高。実装スキルだけでなく「判断を任せられる信頼」が必要なため、いきなり狙うのは難しいタイプです。タイプB〜Cで実績を積み、設計判断の経験を重ねた先に届くゾーンと考えるのが現実的です。

案件タイプ × 単価レンジ × 必要スキル早見表

ここまでの5タイプを一覧にまとめます。自分がいまどこに立っているかを見るための地図として使ってください。

※ 単価レンジは市場データをもとにした目安です。稼働時間・契約形態・地域・あなたの実績によって前後します。

この表を見ると、単価が上がるにつれて「フロント単独 → サーバーサイドまで → 設計判断まで」とスキルの幅と責任範囲が広がっているのが分かります。次の章では、この表に自分のスキルを当てはめて「今取れるタイプ」と「次に狙うタイプ」を見極めていきます。

自分が「今取れるタイプ」と「次に狙うタイプ」を見極める

案件タイプ別の単価が分かったら、次は自分のスキルを当てはめて現在地を確認します。ここを言語化できると、案件選びにも学習にも優先順位がつきます。

自分のスキルを案件タイプにマッピングするチェック観点

以下の観点で、自分がどこまで「実務でできる」かをチェックしてみてください。「学習しただけ」と「案件で使った」は区別するのがポイントです。案件で評価されるのはあくまで後者だからです。

• App Routerでの新規構築：ルーティング・レイアウト・RSCを使ったページ構築を実務でこなしたことがあるか
• SSR/SSG/ISRの使い分け：要件に応じてレンダリング方式を選び、設計できるか
• Server Actions / API Routes：フォーム処理やデータ更新などのサーバーロジックを実装したことがあるか
• API設計・DB基礎：バックエンドのデータ取得・更新（ORM経由のCRUDなど）を担当できるか
• パフォーマンス計測・改善：Core Web Vitalsやバンドルサイズを計測し、改善した経験があるか

このチェック結果を、先ほどの早見表に当てはめると現在地が見えます。たとえば次のような対応です。

• React・TS実務＋Pages Routerまで → タイプAが今すぐ取れるゾーン
• そこにApp Routerでの新規構築経験が加わる → タイプB・Dに届く
• さらにServer Actions・API設計まで実務経験がある → タイプCに踏み込める
• 移行設計・性能改善・設計判断の実績がある → タイプEが射程に入る

単価を1段上げる「次の案件タイプ」への移行ロードマップ

現在地が分かったら、単価を1段上げるために「次にどのタイプを狙い、何を埋めればいいか」を決めます。やみくもに新しい技術を学ぶのではなく、「1つ上のタイプに必要なスキルだけ」に集中するのが効率的です。

• タイプA → B：App Routerでの新規構築経験を作る。小規模でもApp Routerでサイトを1本作り、SSR/SSG/ISRの使い分けを実務で説明できる状態を目指す
• タイプB → C：Server Actions・API Routesでサーバーロジックを実装する経験を積む。フォーム処理・データ更新・簡単な認証まで一通り作れると、フルスタック案件に手が届く
• タイプB → D：ヘッドレスCMS（microCMS・Contentfulなど）との連携を1本経験する。メディア系の継続案件に入りやすくなる
• タイプC → E：設計判断・移行・性能改善の経験を積む。既存案件のなかで「ここはこう設計したほうがいい」という提案を意識的に重ねていくことが、設計を任される案件への布石になる

重要なのは、「今取れるタイプの案件で実績を作りながら、その案件のなかで次のタイプに必要な経験を少しずつ取りに行く」という進め方です。たとえばタイプBの案件をこなしながら、Server Actionsを使う部分を自分から引き受ければ、それがタイプCへの実務経験になります。単価を上げる学習投資は、案件タイプの移行という文脈に紐づけると無駄がありません。

Next.js案件の探し方と、タイプを見極める案件票の読み方

最後に、案件タイプの考え方を実際の案件探しに落とし込みます。案件票を読んでタイプと単価帯を自分で判別できるようになれば、応募の精度が上がります。

案件票からタイプ・単価帯・必要スキルを読み解く

案件票には、タイプを見分けるためのキーワードが必ず書かれています。次のような語に注目すると、その案件がどのタイプで、どのスキルが求められるかが読み取れます。

• 「保守」「機能追加」「改修」「既存サイト」 → タイプA寄り。Pages Routerの記述があれば既存改修系の可能性が高い
• 「新規構築」「SSR」「SSG」「SEO重視」「App Router」 → タイプB寄り。レンダリング設計が問われる
• 「Server Actions」「API Routes」「フルスタック」「Prisma」「認証」 → タイプC寄り。サーバーサイドまで担当する
• 「ヘッドレスCMS」「microCMS」「Contentful」「Jamstack」 → タイプD寄り。CMS連携の経験が効く
• 「移行」「リプレイス」「リアーキテクチャ」「パフォーマンス改善」「Core Web Vitals」 → タイプE寄り。設計判断が求められる

あわせて単価欄を見れば、「このタイプはこのくらいの単価で出ている」という相場感が自分のなかに蓄積されていきます。要求スキルと単価のセットで案件票を読む習慣をつけると、「この単価ならこのスキルが要る」「自分なら今この単価帯まで通る」という判断が早くなります。

案件の探し方とタイプ別の見つけやすさ

Next.js案件を探す経路は、大きく次の3つです。それぞれタイプとの相性があります。

• フリーランスエージェント：担当者が要件と単価を整理して紹介してくれるため、タイプB〜C（新規構築・フルスタック）など、ある程度まとまった案件が見つけやすい経路です。希望タイプと単価ゾーンを担当者に明示しておくと、ミスマッチが減ります
• 案件サイト（求人データベース）：フリーランスHubやテックタレントフリーランスのように、Next.js案件を一覧で比較できます。タイプAからEまで幅広く出ているので、案件票を読み込んでタイプと単価の相場感を養うのに向いています
• 直案件（リファラル・SNS等）：単価交渉の自由度が高い一方、タイプEのような設計判断を任される案件は信頼関係が前提になります。実績を積んでから狙うのが現実的です

案件を獲得したあとは、いかに継続させて収入を安定させるかも大切です。契約更新やパイプライン作りで収入を安定させたい方はNext.jsフリーランスの継続案件の取り方を、副業として週何時間でどのくらいの収入になるかの感覚を掴みたい方はReact/TypeScript副業の週稼働別シミュレーションもあわせてご覧ください。

まとめ｜案件タイプで単価を捉え、次に狙う案件を決める

Next.js案件の「平均88万円」という数字だけでは、自分が現実に取れる単価は見えてきません。大事なのは、Next.js案件を案件タイプで切り分けて捉えることです。

本記事で整理したポイントを振り返ります。

• Next.js案件は、スキルの幅・技術の新しさ・責任範囲の3軸で単価が決まる
• 案件は大きく5タイプ（A 既存改修／B 新規SSR・SSG構築／C フルスタック／D ヘッドレスCMS／E 移行・リアーキ）に分かれ、タイプごとに単価レンジと必要スキルが違う
• 自分のスキルを早見表に当てはめれば、今取れるタイプが分かる
• 単価を1段上げるには、1つ上のタイプに必要なスキルだけに集中し、今の案件のなかで次のタイプの経験を取りに行く

記事を閉じたら、次の3ステップで動いてみてください。

1. 自分のスキル（App Router・Server Actions・API設計・性能改善の実務経験）を早見表に当てはめ、今取れるタイプを確認する
2. そのタイプの案件票を読み込み、相場感を掴んだうえで応募する
3. その案件をこなしながら、1つ上のタイプに必要な経験を意識的に取りに行く

案件タイプという地図を手にすれば、「自分は今どこにいて、次にどこを目指すか」が明確になります。平均値に振り回されず、自分の現在地と次の一手を基準に案件を選んでいきましょう。