Next.js案件の単価相場｜必要スキル・経験別レンジと探し方

Next.js案件の単価相場（月額レンジ）

以下の表は公開案件ベースの目安です。フルリモート・週4〜5日・準委任を想定した数字で、首都圏中心の主要フリーランスエージェント数社の公開案件を2026年7月時点で確認したスナップショットです。非公開案件や面談時に個別提示される条件は含めていません（それらは後述の「公開案件と非公開案件の見方」で別扱いにします）。

単価幅の主因は、Next.jsの構文が書けるかではなく、その現場で機能する意思決定ができるかです。App RouterとPages Routerのどちらを採るべきか、RSCをどこまで使い切るか、Server Actionsで扱う責務の線引きなど、選定と説明ができる人材が上振れします。

公開案件と非公開案件の見方

まずは公開案件ベースで月80〜130万円が目安です。非公開案件は個別条件で上振れするケースがあり、フロントリードや大規模SaaSの新規立ち上げでは150万円前後が提示されることもあります。ただし非公開は個別性が強く、公開案件と同列に並べて「相場」として扱うのは避けたほうが安全です。読者側の視点で自分が狙える現実的なレンジを見るなら、公開案件のボリュームゾーンを起点に判断するのが妥当です。

東京在住／地方在住×リモート条件の比較

以下は2026年時点の首都圏エージェント公開案件を確認した目安で、実務経験3年以上を想定しています。

差が出やすいのは週1回以上の常駐条件がついた場合です。完全リモート前提の案件では在住地による単価差は小さくなる傾向で、首都圏エージェントの公開案件を見る限り、Next.js案件はフルリモート可の募集が一定数見られます。

ミニFAQ：週3日稼働だと単価はどう変わりますか？

公開案件では月60〜80万円前後の募集が見られます。フルタイム稼働の8割相当ではなく、切り出し可能なタスクベースで見積もられるため、単純な日割りより下がりがちです。

経験年数別のNext.js単価目安

経験年数だけで単価は決まりませんが、目安としてよく問われる観点なので、担当できる領域とセットで整理します。ここでの経験年数は、主にReact／フロントエンド実務年数を基準にしつつ、Next.js実務経験の有無で上下する目安として読んでください。

実務1〜2年（React経験ベースでNext.js参画）

• 単価目安：60〜85万円（週5日・準委任・首都圏公開案件ベース）

• 担当領域：既存機能のページ追加、UI改修、簡単なSSR/SSG設定

• 面談で問われる：Reactの基礎、TypeScriptの読み書き、Next.jsのルーティング理解

Reactでの実務が2年程度あればNext.js案件への参画は現実的です。ただし単価の上振れには、次のセクション（3〜5年層）で挙げるスキルの一部を実務で扱えることが条件になります。

実務3〜5年（Next.js中核層）

• 単価目安：90〜120万円（週4〜5日・準委任・公開案件ベース）

• 担当領域：新規機能設計、状態管理設計、パフォーマンス改善、レビュー

• 面談で問われる：App RouterとPages Routerの選定理由、RSCの使い所、キャッシュ戦略

このレンジは公開案件のボリュームゾーンで、Next.js案件を継続的に受注しやすい層です。TypeScriptの型設計、テスト（Vitest／Playwright等）、CI/CDの実務経験が単価上振れの分かれ目になります。

実務5年以上（リード・テックリード寄り）

• 単価目安：120〜150万円前後（公開案件は少なく、面談で提示されるレンジを含む）

• 担当領域：技術選定、アーキテクチャ設計、採用面談、パフォーマンス改善の主導

• 面談で問われる：技術判断の説明、レビュー方針、チーム開発の運用設計

リード層は公開案件が少なく、エージェント面談を通じて紹介されるケースが増えます。マネジメントの範囲（設計判断のみか、採用や工数見積もりまでか）で単価幅が大きく開く点に注意してください。

ミニFAQ：Reactは5年経験だがNext.jsはまだ半年です。単価はどう見られますか？

面談での見せ方次第で3〜5年層のレンジに近づけます。App RouterとPages Routerの違い、RSCとクライアントコンポーネントの責務分離を自分の言葉で説明できると、Next.js歴の短さは大きな減点になりにくい印象です。

Next.js案件で求められる必要スキル

Next.js案件の面談で問われるスキルを、中核／周辺／差別化の3層に整理します。中核は「これがないと参画が難しい」層、周辺は「あると担当領域が広がる」層、差別化は「単価が上振れしやすい」層です。

中核スキル（案件参画の前提）

• React：Hooks、コンポーネント設計、状態管理（Zustand / Jotai / Redux Toolkitのいずれか）

• TypeScript：型定義の読み書き、ジェネリクスの基本、unknown型とany型の使い分け

• Next.js基本：ルーティング（App Router／Pages Router）、SSR/SSG/ISRの選択判断、LinkコンポーネントとImageコンポーネントの使い所

• Web基礎：HTTPステータス、Cookieセッション、CORS、SEOの基本

• Git／レビュー文化：ブランチ運用、プルリクエストベースの開発

Reactを1〜2年書いた経験があれば、上記中核はキャッチアップしやすい傾向があります。ただし案件参画時には実務での再現性を見られることが多く、個人開発だけでは面談通過が難しいケースもあります。Next.js固有部分は公式ドキュメントで学べる領域が広く、キャッチアップコストは比較的低いのが特徴です。

周辺スキル（担当領域を広げる）

• App Router / React Server Components：Server ComponentsとClient Componentsの責務分離、Server Actionsの使い所

• 状態管理・データフェッチ：TanStack Query（React Query）、SWR、キャッシュ制御

• 認証：NextAuth.js（Auth.js）、Cookieセッション、OAuth2の理解

• BFF / API：Route Handlers、tRPC、GraphQL（Apollo Client等）

• デプロイ・運用：Vercel、AWS Amplify、Cloud Run、環境変数管理

このレベルまで扱えると、フロントエンド中核〜フルスタック寄りの案件で単価90〜120万円レンジに入りやすくなります。特に認証とBFFは案件参画時のつまずきどころで、実装経験があると担当領域を広く見てもらいやすくなる傾向があります。

差別化スキル（単価が上振れしやすい）

• パフォーマンス改善実績：Core Web Vitals（LCP／CLS／INP）改善の具体的な数値

• キャッシュ戦略の設計判断：ISRの再検証タイミング、revalidateTagの使い分け、fetchのキャッシュ制御

• デザインシステム構築：Tailwind CSS、CSS Modules、shadcn/uiベースの共通コンポーネント設計

• アクセシビリティ（a11y）：WAI-ARIA、スクリーンリーダー対応、キーボード操作

• テスト：Playwrightでのe2e、Vitest、Storybookでのビジュアルリグレッション

• CI/CD／モニタリング：GitHub Actions、Sentry、Datadog、Lighthouse CI

このどれかで具体的な数値（改善前後のスコア、削減時間等）を語れると、フロントリードや大規模SaaS案件で120万円以上を提示されやすい傾向があります。実際の単価は責任範囲・チーム規模・稼働条件でも変わりますが、「速くしました」ではなく「LCPを2.8秒から1.2秒に短縮した」のように事実で示すのがポイントです。

ミニFAQ：Next.jsの公式チュートリアルだけで案件を狙えますか？

チュートリアル完走はスタート地点で、実際の案件参画にはReactでの1〜2年の実務経験が必要になるケースが多いです。個人開発でNext.js製のサービスを1本作り、パフォーマンスやSEOに手を入れた経験があると、面談で語れる材料になります。

Next.js案件の種類と稼働イメージ

案件タイプによって求められるスキルの重心が変わります。「自分に合うのはどのタイプか」を先に見極めると、面談での見せ方も定まります。以下の各タイプの単価も、前段と同様に公開案件ベースの目安です。

タイプ1：SSR/SSGでのサイト刷新

WordPressやRailsで運用してきたコーポレートサイト・メディアをNext.jsに置き換える案件です。SEO・表示速度の改善が目的で、Vercel運用を前提にした募集も見られます。

• 必要スキル：ISR設計、Image最適化、Core Web Vitals改善、CMS連携（microCMS／Contentful等）

• 稼働イメージ：週3〜5日、3〜6カ月、単価80〜110万円が多い

ミニFAQ：HTMLコーダー出身でも参画できますか？

デザインとマークアップに強みがあるなら、TypeScriptとReactの基本を押さえたうえで参画は可能です。ただしSSR/SSGの選定判断やCore Web Vitalsの改善は別スキルなので、そこまで担当するとしないでは単価レンジが変わります。

タイプ2：toB SaaSのフロントエンド新規開発

BtoB SaaSの新規プロダクトや管理画面の刷新でNext.jsを採用する案件です。App RouterとRSCを前提とし、認証・権限・BFFまで一気通貫で扱うことが多いのが特徴です。

• 必要スキル：App Router、Server Actions、認証（NextAuth等）、状態管理設計、テスト戦略

• 稼働イメージ：週4〜5日、6カ月〜1年、単価100〜130万円が多い

このタイプは設計判断ができるミドル〜シニア層が中核で、Reactの実務経験3〜5年層が最もマッチします。

タイプ3：toC大規模サービスのパフォーマンス改善・機能拡張

すでにNext.js上で運用中のtoCサービスで、パフォーマンス改善や新機能追加を担当する案件です。ユーザー数が多いため、キャッシュ戦略・A/Bテスト・観測基盤との連携が問われます。

• 必要スキル：キャッシュ設計、Core Web Vitals改善、モニタリング、A/Bテスト運用

• 稼働イメージ：週4〜5日、長期継続、単価110〜140万円

タイプ4：フロントリード・テックリード

技術選定、アーキテクチャ設計、レビュー方針の策定を担当する案件です。実装よりも意思決定と説明の比重が大きくなります。

• 必要スキル：技術選定の言語化、レビュー運用、採用面談、工数見積もり

• 稼働イメージ：週4〜5日、長期、単価120〜150万円前後

5〜8名程度のチームでは、週の3〜4割をレビュー・1on1・設計判断に確保すると回しやすいケースが多い、というのが現場での目安です。

単価を上げる立ち回り

面談と契約の段階で意識するとレンジが変わるポイントを整理します。

面談での差別化

Next.jsの技術面談で問われる典型パターンは、「App RouterとPages Routerをどう選ぶか」「RSCとClient Componentのどこで線を引くか」「キャッシュ戦略をどう設計するか」の三点です。実装できるだけでなく、選択理由を自分の言葉で説明できると面談通過率が上がります。

• 「App Routerで作りました」ではなく「〇〇の要件でSSRが必要だったのでApp Routerを選び、RSCで初期表示を軽くしました」と説明する

• 具体的な数値（改善前後のLighthouseスコア、削減した工数）を1〜2個は持っておく

• 課題があった箇所を「何を試して」「なぜ選ばなかったか」まで語れると設計判断ができる印象が残る

ポートフォリオ・GitHubの見せ方

面談前に確認されやすいのは、GitHubのリポジトリと個人開発サービスです。READMEに技術選定の理由を書く、READMEにパフォーマンス指標を載せる、この2点でエージェント側の推薦が通りやすくなります。

契約時の交渉

実績に根拠がある場合は、初回契約でも希望レンジの上限寄りから相談する方法があります。エージェントから「クライアント側の予算はここまで」と返ってきたら、そこから逆算して稼働日数・スコープを調整します。契約更新時は、成果を数値で示せる状態を作ってから交渉すると通りやすくなります。

単価を体系的に上げる考え方は『フリーランスエンジニアの単価相場と単価の上げ方』で整理しています。

Next.js案件の探し方

案件の探し方としては、まずエージェントで「Next.js」「React」を主タグにして絞るのが実務的です。Next.jsは求人検索軸としてまだ独立していないエージェントもあり、その場合はReactで絞ってからNext.js記載を目視で確認する流れになります。

エージェント登録から参画までの流れ

1. エージェント2〜3社に登録：自社サービスであるフリコンを含め複数登録すると、案件量と条件を比較しやすくなります

2. 希望条件の整理：単価下限、稼働日数、リモート／出社、担当範囲を明確化

3. キャリアシート・スキルシートの作成：Next.jsの経験は「App Router」「RSC」「認証」など個別に書く

4. カウンセリング・案件紹介：週次で紹介案件を受け取り、興味のある案件を絞る

5. クライアント面談：技術面談＋カルチャー面談。1〜2社と並行することが多い

6. 契約締結・参画：初月は業務理解に充てる期間として単価も加味される

エージェントでの絞り方（実務的なコツ）

• タグ：「Next.js」「React」「TypeScript」の3つを軸にする。案件検索が「フロントエンド」までしかない場合は、詳細ページの技術スタック欄で確認する

• リモート条件：「フルリモート」「週1回程度出社」「常駐必須」の3レベルで絞る

• 単価レンジ：希望下限のみ入力する（上限を入れすぎると案件が絞られすぎる）

• 参画時期：即日〜1カ月以内が最も紹介されやすい

単価診断で狙えるレンジを確認する

自分の経験・スキルからどれくらいの単価を狙えるかは、フリーランスエンジニア単価診断で概算を確認できます。エージェント面談前の下準備として、目安を掴んでおくと交渉の材料になります。

よくある失敗と対策

Next.js案件で相談を受けやすい失敗パターンをまとめます。

失敗1：Reactの実務経験が浅いままNext.js単価を狙う

Next.jsの公式チュートリアルだけを頼りに高単価案件を狙うと、面談で足元を掬われるケースがあります。Reactでの2年程度の実務経験が下地としてあり、そのうえでNext.jsの実装経験を積むのが順当な流れです。

失敗2：App Router／Pages Routerの選定を語れない

「App Routerで作った」だけでは面談で減点されやすい典型パターンです。なぜApp Routerを選んだか、RSCとClient Componentをどう線引きしたかを1分で説明できる状態にしておきましょう。

失敗3：パフォーマンス改善を「速くしました」で語る

「速くしました」ではLighthouseやCore Web Vitalsの改善実績として弱く、面談で刺さりません。改善前後の数値（LCP、CLS、INP）を持ち帰って語れる状態にしておくのがポイントです。

失敗4：非公開案件の相場を基準に希望を出す

面談で「非公開なら150万円まで出せるケースもある」と聞くと、それを希望単価の基準にしがちですが、非公開案件は個別性が強く、常に自分に紹介されるとは限りません。まずは公開案件ベースの現実的なレンジを起点に、自分の実績で上振れを狙う戦略が安全です。

実践チェックリスト

Next.js案件で単価100万円レンジを目指す場合の、面談前に整えたい状態をチェックリストにしました。

• ☐

  React実務2年以上／TypeScript実務1年以上

• ☐

  App Router・Pages Routerの選定理由を1分で説明できる

• ☐

  RSCとClient Componentの責務分離を実装例で説明できる

• ☐

  Core Web Vitalsの改善実績を数値で1件以上持っている

• ☐

  認証（NextAuth／Cookieセッション）の実装経験がある

• ☐

  Vercel／AWS等のデプロイ・環境変数管理を1つ以上経験

• ☐

  TanStack QueryまたはSWRでのデータフェッチ実装経験

• ☐

  GitHubに技術選定の理由を書いたREADMEがある

• ☐

  Lighthouseスコアを載せた個人サービスがある

• ☐

  エージェント2社以上に登録済み

10項目のうち7〜8つ埋まっていれば、面談で中核層として評価されやすくなり、公開案件ベースで単価90〜120万円レンジを狙いやすくなります。実際には項目数よりも、実務の深さ・成果の再現性・担当範囲が単価に効きます。

まとめ

Next.jsフリーランス案件の単価は、公開案件ベースで月80〜130万円レンジが中核ゾーンで、経験3年以上でApp Router・RSC・TypeScriptを実務で扱える人材が最もマッチします。単価を上げる鍵は、実装スキルそのものよりも設計判断を自分の言葉で説明できるかとパフォーマンス改善を数値で語れるかの2点です。

• 単価目安：公開案件ベースで月80〜130万円（首都圏中心・週4〜5日準委任）

• 経験3年以上でApp Router／RSC／TypeScriptを実務で扱えると中核レンジ

• 差別化はパフォーマンス改善実績・キャッシュ設計・BFF/API連携

• 案件はSSR/SSG刷新、toB SaaS新規、toCサービス拡張、リード層の4タイプ

• 探し方はエージェントでReact・Next.js・TypeScriptを軸に絞り、面談で担当領域を明確化

• 現実的なレンジは公開案件ベースで判断し、非公開は上振れの可能性として位置づける

自分の経験・スキルで狙える単価レンジを確認したい場合は、フリーランスエンジニア単価診断で目安を確認できます。あわせて、Next.js自体の入門や周辺技術は『Next.jsとは？React基盤のフレームワークの特徴・できること・年収・将来性をフリーランス視点で解説』『Reactとは？初心者向け入門解説｜できること・人気の理由まで』『TypeScriptとは？JavaScriptとの違いや年収、将来性について解説』で整理しています。

参考リンク

• Next.js 公式ドキュメント

• Vercel 公式ドキュメント

• React 公式ドキュメント（日本語）

• 厚生労働省 job tag（職業情報提供サイト）Webエンジニア

• Stack Overflow Developer Survey 2025