Next.jsエンジニアのフリーランス面談でよく聞かれる質問と答え方
公開 2026-11-04 監修:株式会社エージェントベスト
フリーランスのNext.jsエンジニアの面談でよく聞かれるのは、どの版とルーターで何を担当したか、サーバーとブラウザの境目をどう決めたか、データの取得と更新をどこに置いたか、古い表示が残ったときにどう調べたか、Server Actionsをどう守ったかの5つです。面談官は、Reactで画面が書けることより、「サーバーをまたぐ判断を任せられるか」を確かめようとしています。
答えるときは、模範解答を覚えるより、自分の経験から「判断した場面」を3〜4つ選び、どの質問にもそこから答えられるように準備しておくのが近道です。面談全般の答え方の型は業務委託の面談でよく聞かれる質問と答え方、Reactに共通する質問はReactエンジニアの面談の記事で扱っているので、この記事ではNext.jsに固有の質問に絞ります。
Next.jsの面談で面談官が見ていること
Next.jsの面談に出てくるのは、発注元のフロントエンドのリードや開発の責任者であることが多く、本人もNext.jsの構成を決めてきた経験を持っています。そのため、機能の名前を知っているかより、その機能を選んだ理由と、困ったときの調べ方を聞いています。
面談官が知りたいのは、おおむね次の3点です。
- 任せられる範囲:画面の実装までか、データの流れやキャッシュの方針まで任せられるか
- 崩れたときの動き方:表示が古い、遅い、版上げで動かないといった場面で、何を見て何を決めたか
- 現場との相性:今のアプリの版や書き方、配信先と、本人の経験が近いか
以下の質問は、この3点のどれかを確かめるためのものです。
よく聞かれる質問と答え方の考え方
ここで示す答えの例は、組み立て方を伝えるための架空の例です。そのまま使うのではなく、ご自身の経験に置き換えて準備してください。
1. 「直近の案件の版、ルーター、配信先と、担当した範囲を教えてください」
確かめたいのは、現場との近さと任せられる範囲です。版、App RouterかPages Routerか、どこに配信していたか、チームの人数、自分が担った範囲を短く伝えます。Next.jsは版によって考え方が大きく変わるため、版を言わずに「Next.jsの経験があります」と話すと、経験の中身が伝わりません。
架空の例:「15から16に上げた自社サービスで、App Router、コンテナでの配信でした。フロントエンドは4名で、私は会員まわりの画面とデータの取得の層を担当し、キャッシュの方針はリードと一緒に決めていました」
2. 「Server ComponentとClient Componentは、どういう基準で分けていましたか」
Next.jsの面談で最もよく聞かれる質問の一つです。答えの中心は、ブラウザ側に回す範囲を小さく保った理由です。「操作が要る部分だけをClient Componentにし、データの取得はサーバー側に残した」という基準に加えて、迷った場面と、どちらにしたかを1つ話せると、判断の質が伝わります。
3. 「データの取得と更新は、どこに置いていましたか」
取得の処理が画面のあちこちに散らばっていないか、権限の確認をどこでしているかを見ています。Next.jsの公式ブログは、新しいプロジェクトではデータへのアクセスを一か所の層にまとめ、そこで利用者の権限を確かめる形を勧めています。自分の現場がどの形だったか、なぜそうしたかを話します。更新については、更新した後に表示をどう新しくしたかまで聞かれることが多くなります。Next.js 16では、Server Actionsの中で更新直後の内容を読み直すupdateTag()が加わり、revalidateTag()は第2引数の指定が要るように変わりました(Next.js公式ブログ、2025年10月21日)。使い分けを自分の言葉で説明できるようにしておきます。
4. 「更新したのに画面が古いままだった、という経験はありますか」
最も掘り下げられやすい質問です。答えは次の順番で組み立てると伝わりやすくなります。
- どんな症状だったか(どの画面で、誰の操作の後に)
- どのキャッシュが効いていると見立てたか
- どの順番で確かめたか
- どう直し、同じことを防ぐために何を決めたか
「キャッシュを切りました」だけで終わると、原因の見立てが見えません。どの層が効いていたかを切り分けた過程まで話せると、構成を任せられる人と受け止められやすくなります。
5. 「Server Actionsの安全性で、気をつけていたことは何ですか」
画面の担当者がサーバー側の入口をどこまで意識しているかを見ています。公式ブログでは、"use server"を付けた関数はブラウザから呼び出せる入口になるため、最初に利用者が実行してよいかを確かめ、引数を検証するよう説明されています。TypeScriptの型は実行時には効かないことや、Client Componentに渡すデータを必要な項目に絞ることも、あわせて話せるとよいでしょう。
6. 「版上げや移行の経験はありますか」
既存のアプリを抱える現場では、ほぼ聞かれます。何から何へ上げたか、影響をどう調べたか、どの順番で移したか、移した後に何で正しさを確かめたかを話します。たとえばNext.js 16では、paramsやcookies()などへの同期的なアクセスが使えなくなり、middleware.tsはproxy.tsへの置き換えが案内されました。こうした変更に実際にどう対応したかは、具体的に話しやすい材料です。
7. 「表示が遅いページを、どう改善しましたか」
何で遅さを測ったか、どこが原因だったか、描画方式やキャッシュ、ブラウザに送るコードの量のどこを変えたかを話します。改善の前後を数字で示せる場合は、計測の方法とあわせて伝えると説得力が増します。
8. 「どこに配信していましたか。配信先で困ったことはありますか」
公式ドキュメントでは、Node.jsのサーバーとコンテナはすべての機能に対応し、静的な書き出しではサーバーが要る機能が使えないと説明されています。配信先によって使える機能が変わることを踏まえて、構成を決めた経験があれば話します。配信まで担っていない場合は、担当していたチームとどう受け渡していたかを話せば十分です。
準備は「判断した場面」を3〜4つに絞る
質問の数だけ答えを用意するより、次のような場面を3〜4つ選んで深く準備するほうが、掘り下げに耐えられます。
- サーバーとブラウザの境目で迷い、どちらかに決めた場面
- 古い表示や遅い表示の原因を調べて直した場面
- 版上げや書き方の移行を進めた場面
- Server Actionsやデータの取得の層で、権限や検証の抜けを防いだ場面
それぞれについて、状況、選択肢、選んだ理由、結果、次に生かしたことを短く書き出しておきます。スキルシートに書いた内容と食い違わないよう、Next.jsのスキルシートの記事の書き方とそろえておくと安心です。
面談の相手によって重心が変わる
| 面談の相手 | 重心を置く話 |
|---|---|
| フロントエンドのリード | 境目の判断、キャッシュの調べ方、レビューで見ている点 |
| バックエンド・インフラの担当者 | データの取得の層、Server Actionsの安全性、配信先の制約 |
| プロダクト・事業の担当者 | 仕様の詰め方、リリースの進め方、表示速度の改善の成果 |
相手が技術者でない場合は、専門用語を減らし、「何が良くなったか」を先に話すと伝わりやすくなります。
Next.jsならではの逆質問
逆質問は、印象づくりより参画後のずれを防ぐ確認に使います。Next.jsの案件では、次の点を聞いておくと判断がしやすくなります。
- 使っている版とルーター、版上げの予定
- キャッシュの考え方(以前の書き方か、Cache Componentsか)
- 配信先と、セキュリティ更新を誰が適用しているか
- Server Actionsやデータの取得の層を、誰が責任を持って書いているか
- テストとレビューの決まり
一般的な逆質問の考え方は業務委託の面談で聞いておくべき逆質問にまとめています。聞いた内容は、Next.js案件の選び方で整理した契約前の確認にもそのまま使えます。
よくある質問
面談でコーディングの課題を出されることはありますか?
案件によってはあります。事前の課題や、面談中に画面を共有しながら既存のコードを読む形などがあります。課題がある場合は、書いた理由を説明できるかも見られるため、境目の判断やデータの取得の置き場所を言葉にしながら進めるとよいでしょう。
Pages Routerの経験しかないと、面談で不利になりますか?
App Routerの案件では、不利に見られることがあります。ただ、Pages Routerで動く既存のアプリの保守や、App Routerへの移行の案件では、以前の書き方を理解していることが強みになります。個人のアプリなどでApp Routerに触れ、違いを説明できるようにしておくと、話せる範囲が広がります。
面談で見送られた理由が分からないときはどうすればよいですか?
フリーランスエージェントを通している場合は、担当者に面談の感触や発注元の反応を聞いてみましょう。理由が分からないままでも、聞かれた質問と答えを書き出しておくと、次の準備に生かせます。考え方は面談で見送られる理由と次に生かす方法で解説しています。
参考にした公的情報・資料
- How to Think About Security in Next.js(Next.js Blog)
- Next.js 16(Next.js Blog)
- Next.js 16.4(Next.js Blog)
- Deploying(Next.js Docs)
記事の内容は公開日時点の情報にもとづきます。制度や税率は変わることがあるため、手続きの前に必ず各機関の最新情報をご確認ください。