使用 Next.js 创建并展示博客的首页 - 约 566 字
在上一篇文章 《 如何使用 Next.js 构建高效的博客网站 》 当中，你已经成功地创建了一个 Next.js 项目。在这篇文章中，我们将使用 Next.js 创建一个博客的首页，并在浏览器中展示出来。
启动服务
我们的博客项目创建完成后，先启动一下服务看一下能不能正常运行。在 VS Code 终端命令窗口输入 npm run dev 启动开发服务器。
npm run dev我们启动开发服务器的时候它会报错，因为我们并没有添加任何东西进去，所以它才会这样子。丢点击一下 VS Code 终端命令窗口，按下组合键 Ctrl + C 退出开发服务器。
接下来，我们要做的就是，在项目根目录 Next-Blog 创建一个名为 pages 的文件夹，然后在终端命令窗口输入 npm run dev 启动开发服务器。
这时候，在浏览器地址栏输入 http://localhost:3000 并回车，这时它会显示一个 404 页面。
404 | This page could not be found.创建首页
在 pages 文件夹里创建一个 index.js 文件，在这个文件里写入下面的代码。
export default function Home() {
return (
<main>
<h1>
FanMa Blog's HomePage
</h1>
<p>
This a FanMa Blog.
</p>
</main>
);
}
把上面的代码输入到 index.js 文件里后，按下组合键 Ctrl + S 保存刚才输入的代码内容。
然后我们再回到浏览器，刷新一下 http://localhost:3000 页面（它也可能会自动帮你刷新页面），现在我们就可以看到这个网页显示 FanMa Blog's HomePage 和 This a FanMa Blog. 的内容。
结论
到此为止，我们已经成功地创建了一个 Next.js 项目，并且添加了一个首页。可以继续添加其他页面和功能来完善我们的博客。Next.js 是一个强大的工具，可以帮助我们更快速地搭建并开发 Web 应用程序。希望这篇文章能对您有所帮助！如果你对此有兴趣，还可以继续关注我的下一篇文章。