如何使用 Next.js 构建高效的博客网站 - 约 815 字
在创建博客网站前，您先要安装好 Next.js 等相关依赖才能进行下去。在这里我们并不使用 Next.js 官方的方法来安装 Next.js 框架。这是由于我们在写博客程序的时候需要安装相关功能的一些依赖，如果功能使用得多的话，安装的依赖也就越多。
为了避免每使用一个功能就要安装一次依赖，在这我们把这一步全部在这里给它做后，后面就不再需要一步一步安装相关的依赖了。
系统要求
新版本的 Next.js 对系统还是有一定的要求的，它必需满足以下条件才可以正常稳定的运行。
- Node.js 版本至少为 14.6.0 建议 16.0.0 以上版本。
- MacOS, Windows (including WSL), and Linux are supported，（ 至少为 Windows 10 系统，Windows 7 支持并不友好，Windows 7 已经安装不了 Node.js 12.2.0 版本了。）
创建目录
我们在D盘创建一个名为 Next-Blog 的目录，路径为 D:\Next-Blog 。当然也中以根据你的实际情况，创建自己喜欢的目录名称，位置也是可以随意调整的。
创建 JSON
我们使用 VS Code 来编写 Next.js 代码，它用来编写代码非常地方便，可以自动补全、自动导入、移动文件会自动更新引用路径等等非常方便且实用的功能。
先打开 VS Code 软件，然后点击 打开文件夹 ，找到并选择刚才创建的 Next-Blog 文件夹，这个文件夹就是我们的项目根目录了。
使用 VS Code 在 Next-Blog 根目录创建一个名为 package.json 的文件。在里面写入下面的代码内容：
{
"name": "next-blog",
"private": true,
"scripts": {
"build": "next build",
"dev": "next dev",
"start": "next start",
"export": "next export"
},
"dependencies": {
"date-fns": "^2.29.3",
"gray-matter": "^4.0.3",
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0",
"remark": "^14.0.2",
"remark-html": "^15.0.1"
}
}
在 package.json 文件里的 name 为项目名称，注意： name 的名称是不可以使用大写的，这个必需要遵守。在 scripts 里的内容为一些 npm 的一些启动相关的命令：
- build ：打包生成静态文件。
- dev ：启动开发服务器。
- start ：启动生产环境。
- export ：把打包生成的静态文件输出到名为
out的目录里。
里面的 dependencies 是我们所需要的相关依赖，它包含了 next react react-dom 主要内容，其他都是我们后面需要使用的相关依赖。
安装 Next.js
把上面的全部设置好后，在 VS Code 软件里按组合键 Ctrl Shift + ` 打开终端命令窗口。
在终端命令窗口输入 npm install 并回车。
npm install使用这个命令会把 package.json 里的所有依赖都帮你安装上去，就不用每次使用的时候再安装一篇了。安装的时候可能需要花费一定的时间，请稍等一下就好了。
上面的命令运行完成后，我们的博客项目就已经初始化完成了。