IT-Q

App Router と Pages Router は、どこで見分けますか。

ディレクトリを見ます。app があれば App Router、pages があれば Pages Router です。両方あることもあり、その場合は移行が途中で止まっていると読めます。併存自体は可能です。

面接官が見ているのは参画したコードがどちらか判断できないと、調べ物が最初から噛み合わない。

よくある答えと、面談でどう見られるか

  • ディレクトリで見分ける。app があれば App Router、pages があれば Pages Router
    両方あることもあります。移行途中というだけで、併存は可能です。
  • next.config の設定で切り替える
    設定では切り替えません。ディレクトリの有無で決まります。
  • Next.js のバージョンで決まる。13 以降は必ず App Router
    13 以降は使えますが、使っているとは限りません。バージョンだけでは決まりません。
  • package.json の設定項目で指定する
    そこには書きません。

模範解答

ディレクトリを見ます。app があれば App Router、pages があれば Pages Router です。両方あることもあり、その場合は移行が途中で止まっていると解釈します。併存は可能です。

中身でも見分けられます。App Router は page.tsx / layout.tsx という決まった名前のファイルで構成されます。Pages Router はファイル名がそのまま URL になり、getServerSideProps や getStaticProps といった関数が出てきます。

あわせて package.json で Next.js のバージョンも確認します。両者は API がまったく違うので、どちらの記事を読んでいるかを見誤ると調べ物が根本的に噛み合いません。