App Routerでプロジェクトを作る

もう一度 npx create-next-app@latest を実行し、今度はApp Routerを選択してプロジェクトを作ります。同じコマンドでも、選択次第で生成されるファイル構成が変わります。

Pages Routerとの違いを見る

2つのプロジェクトを並べて比べると、ディレクトリ構成が違うことが分かります。Pages Routerは pages ディレクトリ、App Routerは app ディレクトリが起点です。どのファイルがトップページに対応するのかを確認してください。

App Routerでも同じことをやってみる

構成が違っても、追加・削除・編集という操作の考え方は同じです。App Router側でも手を動かして、違いと共通点の両方を体で覚えましょう。

• App Routerでプロジェクトを作成する
• 作成されたWebページを確認する
• Pages Routerとの違いを確認する
• App Routerで追加・削除・編集する