文件夹就是路由

大多数框架都要求你在某处写下路由：列出路径，并为每个路径配上一个组件。Next.js 则直接从文件树中读取路由。

整条规则可以用一行来概括：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，它才是一个路由。

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

这里存在 app/menu/，但没人能访问 /menu：其中没有页面文件。它只是通往 /menu/drinks 的容器。这是一项功能：你可以在 app/ 中将相关文件归类在一起，而不会意外发布 URL。

文件夹名称就是 URL 路径段，字符完全一致。名为 About Us 的文件夹会生成 URL /About%20Us，这就是路由文件夹使用小写字母和连字符的原因：app/about-us/。