Page，页面。在 Next.js 框架里，页面实际上就是 React 组件，这些页面组件需要放在特定的目录里面，比如放在 pages 或者 app 目录的下面。每个页面都会自动关联一个对应的路由，Next 框架会根据页面文件的名字生成对应的路由。

pages

下面我们可以试一下创建一个页面，比如先创建一个应用的首页页面，可以先把它放在 pages 目录下面，名字应该是 index.tsx。

在文件里定义一个 React 组件，名字是 Page。设置一下组件的视图，也就是这个页面要显示的东西，一组 div，里面包装一个大标题，标题内容是“首页”，下面再添加一组 div，文字是“我在宁皓网学习 Next.js。”

测试

在终端，项目所在目录的下面，执行一下 npm run dev，启动一下项目的开发服务。

然后在浏览器打开开发服务的地址，默认就是 localhost:3000。现在页面上显示的就是 pages 下面的 index.tsx 这个文件里定义的一个 React 组件。

源代码

右键点击页面，选择显示网页源代码，搜索一下 宁皓网 ，在这个页面的源代码这里，可以找到在界面上显示的文字。这是因为 Next.js 框架可以预渲染页面组件，就是 Pre-rendering。

一般的 React 应用，使用的都是客户端渲染，client-side rendering，如果查看网页源代码，你会发现始终是一个空白的 html 文档，并不会包含页面上显示的内容，这些内容是在客户端，也就是用户的浏览器上，通过 javascript 生成的。

Next.js 提供的预渲染功能，有利于搜索引擎优化，页面的性能也会更好。

about.tsx

在项目里再新建一个页面，放在 pages 目录的下面，文件的名字是 about.tsx，文件里定义一个 Page 组件，设置一下组件要显示的东西，在这组 div 标签里再添加一个大标题，标题内容是关于，下面再添加一行文字，放在一组 div 元素里，内容是宁皓网创建于 2011 年。

因为这个页面文件的名字是 about，所以跟这个页面对应的路由的地址就会是 about，在浏览器上测试一下，访问 /about 这个地址，现在显示的就是 About 这个页面。