动手练一练，使用 React 和 Next.js 做一个简单的博客网站（中）

“

作者：Craig Bucklere
       原文：Build a Blog with React and Next.js（sitepoint） 
       字数：4272 字 (非直译，有添加部分)
       阅读: 10 分钟

大家好，在《动手练一练，使用 React 和 Next.js 做一个简单的博客网站（上）》一篇文章里，我们一起了解了什么是 Next.js，并手工创建了一个简单的 Next.js 项目，学会了如何基于模板创建简单的页面，本篇文章，我们继续完善这个案例。

一、基于MD文档生成动态路由

创建博客，自然少不了文章内容，如果我们每写一篇文章，就创建一个 JSX 单页面，这样太不现实，费事费力又不容易维护，我们开发人员更喜欢使用 Markdown 文档写文档。

庆幸的是，Next.js 允许我们使用 Markdown 作为文章的数据源，基于文件名生成动态路由，并且实现文件内容的 HTML 静态化。

1、在编写本功能时，最好停止 Next.js  服务（Ctrl | Cmd + C）。

2、接下来，在项目的根目录里创建 articles 文件夹，把你的 Markdown 文件放置在这里，例如：articles/article-01.md，MD 文档格式如下所示：

---
title: The first article
description: This is the first article.
date: 2020-10-01
---
This is an article post.
## Subheading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

我们将文档的标题名称、文档描述、创建日期放置在 — 之间，Front-matter 这个 npm 插件基于这个格式可以读取上述相关信息提取文档的标题、描述、创建日期。要将 MD 文档格式化成网页的形式，我们还需要安装 remark 和  remark-html 这两个npm 插件，安装命令如下：

npm i front-matter remark remark-html

3、安装完成后，我们要实现读取和格式化 MD 文档的功能，接下来创建 lib/posts-md.js 工具函数文件。getFileIds(dir) 函数返回一个 MD 文件名的数组（不包含 .md 扩展名的文件名），示例代码如下：

import { promises as fsp } from 'fs';
import path from 'path';
import fm from 'front-matter';
import remark from 'remark';
import remarkhtml from 'remark-html';
import * as dateformat from './dateformat';
const fileExt = 'md';
// return absolute path to folder
function absPath(dir) {
  return (
    path.isAbsolute(dir) ? dir : path.resolve(process.cwd(), dir)
  );
}
// return array of files by type in a directory and remove extensions
export async function getFileIds(dir = './') {
  const loc = absPath(dir);
  const files = await fsp.readdir(loc);
  return files
    .filter((fn) => path.extname(fn) === `.${fileExt}`)
    .map((fn) => path.basename(fn, path.extname(fn)));
}

获取到文件名数组后，我们需要解析 MD 的具体内容，比如文件的标题、描述、创建日期、具体的内容HTML格式化等，示例代码如下：

export async function getFileData(dir = './', id) {
  const
    file =