フォルダがルートになる

ほとんどのフレームワークでは、パスとコンポーネントをペアにしたリストなど、ルーティングをどこかに記述する必要があります。しかし、Next.jsは代わりにファイルツリーからそれらを読み取ります。

ルール全体は1行で収まります: app/ 内のフォルダは URL の一部分であり、その中にある page.jsx が訪問者に表示されるコンテンツです。

app/
    page.jsx                 ->  /
    about/
        page.jsx             ->  /about
    menu/
        page.jsx             ->  /menu
        drinks/
            page.jsx         ->  /menu/drinks

ツリーを下ってURLを読み取ります。/menu/drinks は menu フォルダ、次に drinks フォルダ、そしてその中のページを意味します。フォルダをネストするとURLもネストされます。別のステップはありません。

ルールのもう半分も同様に重要です。フォルダは page.jsx を保持して初めてルート（route）になります。

app/
    menu/
        drinks/
            page.jsx         ->  /menu/drinks  works
        MenuCard.jsx                           not a route
                             ->  /menu         404

ここでは app/menu/ が存在しますが、/menu にアクセスすることはできません。その中に page ファイルが存在しないためです。これは単に /menu/drinks へ向かう途中のコンテナに過ぎません。これは機能の1つであり、誤って URL を公開することなく、関連するファイルを app/ 内でグループ化できます。

そして、フォルダ名がそのままURLセグメントになり、1文字ずつ一致します。About Us という名前のフォルダは /About%20Us というURLになるため、ルーティング用のフォルダは小文字とハイフンで構成されます: app/about-us/。