Next.js 框架用的是一种基于文件系统的路由，也就是我们不需要特别定义路由，只需要在特定目录里面创建特定的目录还有文件就可以了。Next.js 会根据目录或者文件的名字生成对应的路由。

比如我们在应用需要一个内容列表页面，地址是 /posts。在这个 app 目录的下面，可以新建一个目录，名字是 posts，这个目录的名字 posts 就是这个页面路由的地址。在它里面添加一个页面组件，名字是 page.tsx。

文件里定义一个 Page 组件，修改一下页面视图里显示的文字，改成“内容列表”。

测试

在浏览器，访问一下 /posts 这个地址，现在页面上显示的就是 posts 目录里的页面组件。

head

在这个 posts 目录里面再新建一个 head.tsx，文件里定义一个 Head 组件，一组 fragment，然后是一组 title 元素，里面的文字是“内容列表 - 宁皓网”。

预览

现在这个内容列表页面的标签栏上显示的就会是 “内容列表 - 宁皓网”。