引き継いだ Next.js のコードを読むとき、どこから見ますか。
app ディレクトリの構造からです。App Router ではURLとフォルダ構造が対応しているので、ツリーを見るだけでそのアプリが持つ画面の一覧が分かります。
面接官が見ているのは現実的な読み方を持っているか。
よくある答えと、面談でどう見られるか
- app の構造から入り、対象の page と上位の layout を読む。触る範囲だけに絞る
URL とフォルダ構造が対応しているので、ツリーだけで全体像が掴めます。 - package.json から見て、使っているライブラリを把握する
バージョン確認は重要ですが、それだけでは何の画面があるか分かりません。構造から入る方が早いです。 - components ディレクトリから読む
部品から入ると、どこで使われているか分からないまま読むことになります。使う側から辿る方が意図を掴めます。 - 全体を通して読み、把握してから着手する
規模によっては終わりません。触る範囲に絞るのが現実的です。
面接官は何を見ているか
- app（または pages）の構造から入ると言えた
- URL とファイルの対応で全体像を掴む発想があった
- 全部を理解しようとしないと言えた
模範解答
app ディレクトリの構造から見ます。App Router では URL とフォルダ構造が対応しているので、ディレクトリツリーを見るだけで「このアプリが何の画面を持っているか」が分かります。
次に、対象の画面の page.tsx を読み、そこから呼ばれているデータ取得とコンポーネントを辿ります。並行して、上位の layout.tsx を確認します。共通の枠や Provider がそこに入っているので、page だけ読んでも分からない挙動の答えがここにあることが多いです。
全体を理解しようとすると終わらないので、触る範囲だけに絞ります。分かったことはメモに残します。次の人のためでもあり、自分のためでもあります。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。
観点をすべて押さえられた場合
参画したプロジェクトが app と pages の両方を持っていました。どう解釈しますか。一部しか触れられなかった場合
App Router か Pages Router か、どうやって見分けますか。触れられなかった場合
App Router か Pages Router か、どうやって見分けますか。