ネットで見つけたコードを写したら動きませんでした。どう対処しますか。
そのコードがどのバージョン向けかを確認します。Next.js は既定の挙動そのものが変わることがあり、fetch のキャッシュや params の Promise 化がその例です。
面接官が見ているのは🔴 このフレームワークで一番刺さる論点。バージョン差をどう扱うか。
よくある答えと、面談でどう見られるか
- そのコードがどのバージョン向けかを確認し、公式ドキュメントで現在の書き方を見る
公式はバージョンが明示されているので、判断の基準になります。 - App Router 向けか Pages Router 向けかを確認する
両者は API がまったく違うので、ここを見誤ると根本的に噛み合いません。 - エラーメッセージで検索して、同じ症状の記事を探す
早く済むこともありますが、その記事もバージョンが古い可能性があります。同じ落とし穴を踏み直すことになりかねません。 - 生成AIに聞き直して、別の書き方を出してもらう
学習データが古ければ、古い書き方を返し続けます。「AIが間違えた」ではなく「どのバージョンの書き方か」を疑う方が早いです。
面接官は何を見ているか
- 記事のバージョンを確認しようとした
- App Router / Pages Router の違いを疑えた
- 公式ドキュメントに当たる、と言えた
模範解答
まず、そのコードがどのバージョン向けかを確認します。
Next.js は変更が速く、しかも既定の挙動が変わることがあります。実際、fetch は既定でキャッシュする仕様から、しない仕様に変わりました。params は同期オブジェクトから Promise になりました。middleware.ts は 16 で proxy.ts に改名されました。どれも「昔は正しかった」コードです。
加えて App Router と Pages Router で API がまったく違うので、どちらの記事かを見誤ると根本的に噛み合いません。
対処としては、公式ドキュメントで同じことをどう書くかを確認します。公式はバージョンが明示されているので、判断の基準になります。
生成AIの出力も同じ扱いにします。学習データが古ければ古い書き方を返してくるので、動かないときは「AIが間違えた」ではなく「どのバージョンの書き方か」を疑うのが早いです。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。
観点をすべて押さえられた場合
バージョンを上げるとき、どう進めますか。一部しか触れられなかった場合
使っているバージョンは、どこで確認しますか。触れられなかった場合
使っているバージョンは、どこで確認しますか。