使用 Next.js 重建我的博客

同时发布于 jolvera.dev

我的网站主要用于尝试新技术，而不是撰写内容。这次我用 Next.js 重建了它，如果你正在阅读这篇文章，那么我已经部署了第一个版本。

为什么选择 Next.js

随着 React 和 Gatsby、Next.js 等 SSR 框架的兴起，我看到了很多用 Gatsby 构建的美观且速度很快的博客。你可能已经看过 Dan 的博客了。当然，我也尝试搭建了自己的博客，但我不太喜欢的是 Gatsby blog-starter 使用了 GraphQL，虽然 GraphQL 很棒，但我觉得对于一个简单的博客来说，它并不需要 GraphQL。

出于我想要自己动手制作所有东西的坏习惯，我开始研究如何使用 Next.js 构建我的博客。

如何

过去几个月里，我通过贡献示例和其他一些小改动，逐渐熟悉了 Next.js。目前我还在用它开发两个产品，所以我相信自己能够做出像样的东西。

检查清单

我首先使用create-next-app创建了一个空项目，然后从那里列出了我需要的功能。

1. 从MDX文件列表创建帖子对象
2. 添加语法高亮显示
3. 添加 RSS 源
4. 添加分页

对于一个 Next.js 项目来说，所有这些对我来说都是全新的，我完全不知道该如何实现。所以，我开始研究其他人是如何做的。

Guillermo Rauch ( @rauchg ) 告诉我，Max Stoiber 的网站 ( @mxstbr ) 是他最喜欢的用 Next.js 构建的博客之一，所以我查看了他的GitHub 仓库。

80% 的工作已经在 Max 的代码库中完成了，我很幸运能和他交流。这项工作的功劳主要归功于他，他的实现非常巧妙，对我的帮助很大。

1.Object博客文章集

为了解决第一个问题，Max 使用了babel-plugin-preval/macro包。该包允许你在客户端上下文中动态运行 Node 代码并导出结果。

使用文件系统模块，我们可以获取给定文件夹（例如 `/etc/files`）中的所有文件posts/，提取元数据、内容和路径，并返回一个Object包含所有必要信息的 `.fm` 对象。参见 Max 的实现。

这样我们就可以导入博客文章列表并import blogposts from "../../data/blog-posts";在页面中使用它blog.js。请参阅 Max 的实现和我自己的实现。

举个更简单的例子，我们可以这样做。

import blogposts from "../posts/index";

const Blog = () => (
  <ul>
    {blogposts
      .map((post, index) => (
        <li key={index}>
          <a href={post.path}>{post.title}</a>
          <time>{post.publishedAt}</time>

          {post.summary}
        </li>
    ))}
  </ul>
);

export default Blog;

2. 语法高亮

第二个问题比较棘手。rehype -prism的基本语法高亮功能可以实现，但缺少一个关键功能：高亮显示一行代码的功能，例如：

这大概是整个过程中最难的部分（对我而言）。为了实现这一点，我深入研究了unified.js以及语法树的工作原理。我必须了解 Gatsby 团队和贡献者是如何实现他们自己的语法树的，以及如何将其集成到 MDX 插件接口中。

我从这些软件包中窃取了代码并获得了灵感：

• gatsby-remark-prismjs
• @mapbox/rehype-prism
• 折射器

我不会赘述细节，但我整合了这三个包的代码，实现了语法高亮和行高亮功能。目前还有一些功能缺失，但暂时这样就够用了。请查看当前的实现，我可能会提交一个 pull request 来rehype-prism添加这些功能，或者发布一个单独的模块。

3. RSS订阅

这很简单。我按照 Max 的做法，使用了JSON 源规范，并将博客文章重新格式化Object为 JSON RSS 源。

我仍然没有弄清楚如何在构建时创建 JSON 文件，所以目前我是在提交更改之前运行node 脚本来生成 feed 并将其作为静态文件进行路由。

4. 分页

这很简单。我使用了分页库，并将博客文章Object的长度和其他选项作为输入。

部署

经过一番努力，我终于用 Next.js 把这个项目做成了一个足够好用的博客，这时我非常兴奋地想要把它部署上去，于是在那个星期六晚上，我决定用 Now 2.0 来发布它。

开发环境

使用 Next.js 和 Now 2.0 的好处之一是新增的now dev命令。您可以实时预览生产环境中的运行效果。它使用相同的now.json配置文件，其他方面也基本相同。

所有工作都感觉比预想的要轻松。

结论

网站运行速度非常快。Lighthouse的审核结果令人惊艳。添加内容非常便捷，感觉就像在使用内容管理系统 (CMS) 一样，而且无需登录。

Next.js 提供的 SSR 和预取功能使网站感觉非常流畅、快速且响应迅速。

目前为止，我对使用 Next.js 和 Now 进行开发的体验非常满意，最终成果也证明了这一点。我会向 Next.js 代码库提交一个 pull request，将博客添加为示例，希望其他人也能像我一样觉得 Max 的作品有用。