Next.jsエンジニアのフリーランス案件の仕事内容｜案件の種類と1日・1か月の流れ

フリーランスのNext.jsエンジニアの仕事は、画面を作ることに加えて、サーバーで動く部分とブラウザで動く部分の分け方、データの取得と更新、キャッシュ、配信先までを含めて決め、作り、保つことです。同じ「Next.js案件」でも、何を作る現場か、どこまでを担うかで、1日の時間の使い方と向き合う相手が大きく変わります。

この記事では、Next.jsの案件を5つの種類に分け、それぞれの1日と1か月の流れ、関わる相手、成果物を整理します。Reactの画面開発全般の働き方はReactエンジニアの仕事内容、求められるスキルはNext.jsの案件で求められるスキルで扱っているので、ここでは「参画したら実際に何をしているか」に絞ります。

仕事の中身は「何を作る現場か」と「サーバー側をどこまで持つか」で決まる

Next.jsは、Reactの画面に加えて、ルーティング、サーバーでの描画、データの取得と更新、キャッシュまでを一つの枠組みで扱います。そのため、案件ごとの違いは次の2つの軸で考えると整理しやすくなります。

• 何を作る現場か：日々機能を足していく自社サービスか、表示の速さが売上や集客に直結するサイトか、社内で使う管理画面か
• サーバー側をどこまで持つか：画面とデータの受け渡しまでか、Server Actionsでの更新や認証、データベースへのアクセスまで書くか

この2つを組み合わせると、フリーランスのNext.js案件はおおむね次の5種類に分けられます。

以下では、それぞれの流れを典型的な例として紹介します。時間の配分は案件ごとに違うため、目安として読んでください。

自社サービスの機能開発

1日の流れ（例）

朝は、チャットとタスク管理の道具で前日のレビューの指摘や不具合の報告を確かめ、その日に進めるタスクを決めます。午前中は実装に集中し、ページやレイアウト、部品を作ります。昼過ぎに短い定例でチームと進み具合をそろえ、午後は実装の続きと、他のメンバーのプルリクエストのレビューに時間を使います。夕方は、検証環境で動きを確かめ、翌日に持ち越す論点を書き残します。

Next.jsならではの判断として、この部品をサーバー側に残すか、ブラウザ側に回すかを日々決めていきます。フォームやボタンなど操作が要る部分だけをブラウザ側にし、データの取得はサーバー側に寄せる、といった判断の積み重ねが、ブラウザに送るコードの量を左右します。

1か月の流れ（例）

• 毎週：短い周期の計画と振り返りに出て、次に取り組む機能と見積もりをそろえる
• 月の半ば：大きめの機能のリリースに合わせて、表示の確認、不具合の修正、リリース後の監視を担う
• 月末：稼働時間を締めて報告する。次の月に入る機能の仕様を、プロダクトの担当者と詰める

成果物

ページと部品のコード、テスト、プルリクエストの説明、仕様の確認事項のメモなどです。チームによっては、サーバーとブラウザの境目の決め方や、データの取得の置き場所を、短い設計メモとして残すことも求められます。

表示速度と集客を重視するサイトの構築

メディア、ECの商品ページ、サービスの紹介サイトなど、表示の速さと検索からの流入が成果に直結する案件です。

1日・1か月の流れ（例）

1日の中では、デザインどおりにページを組むことに加えて、どのページを事前に作っておき、どの部分をリクエストのたびに作るかを決める作業に時間を使います。Next.js 16.4では、ページ全体が静的であることをビルド時に保証するensureStaticという設定が加わり、意図しない動的な部品が紛れ込むのを防げるようになりました（2026年10月時点、Next.js公式ブログによる）。こうした仕組みを使って、速さと費用の釣り合いを取るのが、この種類の案件の中心です。

1か月の単位では、表示速度の計測結果を見て改善の優先順位を決めたり、事業側の担当者と特集ページや新しい商品ページの公開の段取りをそろえたりします。記事や商品の情報を管理する仕組みとつなぐ作業や、公開後に表示が古いまま残っていないかの確認もあります。

成果物

ページのテンプレート、描画方式とキャッシュの方針をまとめたメモ、表示速度の計測と改善の記録、公開の手順書などです。

版上げ・移行

古い版や以前の書き方で動いているアプリを、新しい版や新しい考え方に移す案件です。参画直後と、その後で仕事の中身が変わります。

参画直後の数週間

最初は、書き換えより把握が仕事です。使っている版、Pages RouterかApp Routerか、どこで何がキャッシュされているか、配信先がどこかを調べ、変更の影響を受ける箇所を洗い出します。公式のサポート方針では、2026年10月時点で16.xがActive LTS、15.xはセキュリティ修正が2027年1月31日まで続き、14.x以前はサポートの対象外とされています。どの版を目標にするかは、この方針と発注元の事情をあわせて決めます。

計画を立てた後

影響の大きさに応じて、画面やルートの単位で少しずつ移し、移した部分の表示と動作を確かめながら進めます。Next.js 16.4の公式ブログでは、既存のアプリには移行を手伝うnext upgrade --agentや専用のSkillsが用意されていると案内されています。道具が書き換えを手伝っても、どこから移すか、移した後に何で正しさを確かめるかは担当者が決めることです。

成果物

現状の調査結果、移行の計画と順番、書き換えのコード、確認の手順と結果、移行後の注意点のまとめなどです。

管理画面などサーバー側まで担う開発

社内の業務で使う管理画面や、会員向けの画面など、データの更新や権限の扱いが多い案件です。

1日・1か月の流れ（例）

1日の中では、画面の実装に加えて、Server Actionsでの更新処理、データの取得をまとめた層の実装、利用者の権限の確認などに時間を使います。Next.jsの公式ブログは、"use server"を付けた関数はブラウザから呼び出せる入口になるため、最初に権限を確かめ、引数の中身を検証するよう勧めています。画面の担当でありながら、サーバー側の入口を守る責任も持つのがこの種類の特徴です。

1か月の単位では、業務部門との仕様の確認、バックエンドやインフラの担当者との受け渡しの調整、権限の設定の点検などがあります。

成果物

画面のコード、更新処理とデータの取得の層、権限と入力検証の一覧、テスト、業務部門向けの操作の説明などです。

構成のリード・基盤づくり

新しいアプリの立ち上げや、複数のチームが同じアプリを触る現場で、構成と方針を決める役割です。ルーティングとレイアウトの全体、描画方式とキャッシュの方針、チームのコードの決まりを決め、メンバーのレビューを通してそろえていきます。

配信先の選定もこの役割に入ることが多くなります。公式ドキュメントでは、Next.jsはNode.jsのサーバーとDockerのコンテナならすべての機能に対応し、静的な書き出しではサーバーが要る機能が使えず、各プラットフォーム向けのアダプターでは対応が配信先によって変わると説明されています。また、Next.jsは2026年7月から、月に1回ほどを目安にセキュリティ更新の予定を公式ブログで事前に告知する運用を始めています。告知を読み、影響を確かめ、更新を計画に組み込む運用も、リードの仕事になりつつあります。

成果物は、構成と方針の文書、コードの決まり、配信と更新の手順、レビューの記録などです。

どの案件にも共通する仕事

種類が違っても、次の仕事はほぼすべてのNext.js案件にあります。

1. 境目の判断：部品をサーバー側に残すかブラウザ側に回すかを決め、理由を説明できるようにする
2. 表示の確認：更新したのに古い表示が残っていないか、キャッシュの効き方を確かめる
3. レビュー：ブラウザに渡すデータが必要な項目だけに絞られているかなど、Next.jsに固有の点を見る
4. 記録：決めた方針や、調べて分かったことを、後から来た人も追えるように残す

フリーランスならではの仕事として、自分の稼働の記録と報告もあります。月の稼働時間に幅を決めて精算する契約が多いため、日々の作業時間をつけておく必要があります。精算の仕組みは精算幅の記事をご覧ください。

関わる相手と、その相手に出すもの

働く場所は、機能開発や版上げはリモートで進めやすい一方、閉じたネットワークの業務システムでは出社が求められやすくなります。詳しくはNext.jsのリモート案件の記事をご覧ください。

よくある質問

Next.jsの案件では、バックエンドの作業も頼まれますか？

案件によります。画面とデータの受け渡しまでの案件もあれば、Server Actionsでの更新、認証、データベースへのアクセスまで担う案件もあります。どこまでを担う想定かは、面談で具体的に確かめておくと、稼働の見込みとのずれを防げます。

Reactの案件とNext.jsの案件で、仕事はどう違いますか？

Reactの案件は画面の部品と状態の扱いが中心になりやすいのに対し、Next.jsの案件では、サーバーで描画する部分の分け方、データの取得と更新、キャッシュ、配信先の判断が加わります。画面を作る力に加えて、サーバーをまたぐ判断が仕事に含まれる点が違いです。

参画して最初の1か月は何をすることが多いですか？

使っている版とルーター、キャッシュの考え方、配信先、レビューの決まりを確かめるところから始めるのが一般的です。初月の進め方はNext.jsエンジニアの参画初月にやることで詳しく解説します。