本文将会详细介绍如何使用 Next.js 搭建一个简单的 Blog 网站。我们会涵盖到如何初始化项目、创建路由、建立 Markdown 文件系统、以及如何在服务器端生成静态网站。
初始化项目
我们首先需要准备好开发环境，并安装 Node.js 和 npm。完成后，在终端中输入以下命令来初始化我们的 Next.js 项目：
npm init next-app my-blog
这个命令会创建一个名为 my-blog 的工程，并安装所有 Next.js 的依赖包。
创建路由
在 Next.js 中，我们可以通过文件系统来创建路由。例如，我们想要创建一个 /posts 的路由，我们只需要在项目的 pages 目录中创建一个 posts.js 的文件即可。
在这个例子中，我们可以在 pages/posts.js 文件中创建如下路由：
-- -------------------- ---- ------- ------ ----- ---- ------- ----- ----- - -- -- - ------ - ----- -------------- ------ - - ------ ------- -----展开代码
当用户访问 /posts 路由的时候，Next.js 将会自动渲染 Posts 组件。
建立 Markdown 文件系统
为了创建我们的 Blog，我们需要创建一些 Markdown 文件。在 Next.js 中，可以使用 gray-matter 和 remark 库来处理 Markdown 文件。
首先，我们需要安装这些依赖包：
npm install gray-matter remark remark-html
然后，我们新建一个 posts 目录，并在里面创建一些 Markdown 文件。例如，我们在 posts 目录中创建 hello-world.md ，其内容如下：
--- title: 'Hello World' date: '2022-01-01' --- # Hello World This is my first blog post in Next.js!
接着，我们可以使用以下代码加载 hello-world.md 文件，并将其转化成 React 组件并渲染出来：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - ------------ ------------ - ---- ---- ------ - ---- - ---- ------ ------ ------ ---- ------------- ------ ------ ---- -------- ------ ---- ---- ------------- ----- -------------- - ------------------- -------- ----- ----------- - ------ -- - ----- -------- - -------------------- ------------- ----- ------------ - ---------------------- ------- ----- - ----- ------- - - -------------------- ----- ---------------- - -------------------------------------------------- ------ - ----- -------- -------- ---------------- - - ----- ---- - -- ------ ----- ------- -- -- - ------ - ----- ---------------- ------------------- ---- -------------------------- ------- ------- --------- ------ - - ------ ------- ---- ------ ----- -------- ---------------- - ----- ----- - -------------------------------------- -- - ------ ------------------- --- -- ----- ----- - ---------------- -- - ------ - ------- - ---- - - -- ------ - ------ --------- ----- - - ------ ----- -------- ---------------- ------ -- - ----- -------- - ------------------------ ------ - ------ - ----------- - - -展开代码
在上面的代码中，我们首先获取了 posts 目录下的所有文件的文件名，然后将其转化为路由的参数，并将其作为 Next.js 中的 getStaticPaths 静态方法的返回值，这个方法将会让 Next.js 预渲染所有 Markdown 文件转化后的静态页面。
在 getStaticProps 方法中，我们通过调用 getPostData 方法来获取一个 Markdown 文件的元信息和内容，然后作为 Post 组件的属性返回，这将会使用在服务器端渲染时。
静态生成
接下来，我们将会使用 Next.js 中的 getStaticProps 和 getStaticPaths 方法来在服务器端静态生成我们的 Blog 网站。首先，我们需要修改项目中的配置文件 next.config.js，并添加如下代码：
-- -------------------- ---- ------- -------------- - - -- --- ----- ---------- - ------ - - ------- --------- ------------ --- -- - ------- ---------------- ------------ -------------- - - -- ----- ----------- - ------ - - ------- ------------------ ------------ --------------- ---------- ---- - - - -展开代码
在上面的代码中，我们配置了几个路由映射规则，这将会让 Next.js 捕获一些这个路由规则对应的请求，并将其重定向到对应的路由上。
接着，在 pages/post/[slug].js 文件中，我们使用下面的代码来生成所有的路由的静态页面：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ - ----------- - ---- ---- ------ ------ ---- ------------- ------ ------ ---- -------- ------ ---- ---- ------------- ------ ---- ---- ------------------- ----- -------------- - ------------------- -------- ----- ----------- - ------ -- - ----- -------- - -------------------- ------------- ----- ------------ - ---------------------- ------- ----- - ----- ------- - - -------------------- ----- ---------------- - -------------------------------------------------- ------ - ----- -------- -------- ---------------- - - ------ ------- -------- ---------- ---- -- - ------ - ----- --------- -- - - ------ ----- -------- ---------------- ------ -- - ----- ---- - ------------------------ ------ - ------ - ---- - - - ------ ----- -------- ---------------- - ----- ----- - -------------------------------------- -- - ------ ------------------- --- -- ----- ----- - ---------------- -- - ------ - ------- - ---- - - -- ------ - ------ --------- ----- - -展开代码
在这个例子中，我们首先使用 getPostData 方法获取一个 Markdown 文件的元信息和内容，然后将其传递到 Post 组件中进行渲染。接着，在 getStaticProps 和 getStaticPaths 中，我们通过遍历所有的 Markdown 文件来确定生成所有的 Blog 静态页面所需要的静态路径。
最后，在终端中输入以下命令来生成静态网站的所有页面：
npm run build npm run export
这个命令会在项目的 out 目录下生成所有的静态网站文件。
到这里，我们就完成了一个简单的 Blog 网站的创建。这个例子也可以用于构建更加复杂的网站和应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c2e7cf314edc2684c85e25
