App Router か Pages Router か、どうやって見分けますか。
ディレクトリを見ます。app があれば App Router、pages があれば Pages Router です。中身でも判別でき、page.tsx や layout.tsx があれば App Router です。
面接官が見ているのは基本の補強。
これは「引き継いだ Next.js のコードを読むとき、どこから見ますか。」への追撃質問です。
よくある答えと、面談でどう見られるか
- ディレクトリ名（app か pages）と、ファイル規約の違いで見分ける
あわせて package.json でバージョンも確認しておきます。 - next.config の設定で判断する
設定では切り替えません。ディレクトリの有無で決まります。 - getServerSideProps があれば Pages Router
中身からも見分けられます。App Router にはこの関数がありません。 - Next.js のバージョンで判断する
13 以降なら App Router が使えますが、使っているとは限りません。バージョンだけでは決まりません。
面接官は何を見ているか
- ディレクトリ名で判断できると答えた
- ファイル規約の違いを挙げられた
- バージョンも確認しようとした
模範解答
ディレクトリを見ます。app があれば App Router、pages があれば Pages Router です。両方あることもあります。
中身でも見分けられます。App Router は page.tsx / layout.tsx という決まった名前のファイルで構成されます。Pages Router はファイル名がそのまま URL になり、getServerSideProps や getStaticProps といった関数が出てきます。
あわせて package.json で Next.js のバージョンを確認します。バージョンによって使える機能も既定の挙動も違うので、調べ物をする前に必ず見ておきます。