在 Next.js 应用里创建应用的页面，除了可以把它们放在 pages 目录里以外，我们还可以把需要的页面放在 app 这个目录的下面。

把这个 pages 目录的名字改成 app，在 app 目录里的页面组件的文件名都应该是 page。

所以我们需要把这个 index.tsx 改成 page.tsx，然后把这个 about.tsx 放在一个 about 目录里面，文件的名字也需要改成 page.tsx。

在终端重新启动一下项目的开发服务，然后在浏览器测试一下，访问一下应用的根，现在页面上显示的就是 app 目录里的 page 这个文件里定义的那个组件。

再试一下，访问 /about，现在页面上显示的就是 app 目录里的 about 目录下面的那个 page 文件里定义的组件。

组件的名字

虽然页面组件的名字不重要，不过在这个项目里我们可以统一把页面组件的名字设置成 Page。