React 和 Next

无需加好友免费技术支持

创作者：Craig Bucklere全文：Build a Blog with React and Next.js（sitepoint） 篇幅：4272 字 (非直接翻译，有加上一部分) 阅读文章: 10 min

小伙伴们好，在使用 React 和 Next.js做一个简单的个人博客(上) 在一篇文章中，大家学到了什么 Next.js，并手工制作造就了一个简单的 Next.js 在本文中，我们学会了怎样根据模版建立简单页面，我们继续改善这个案例。

文章自然也是建立博主不可缺少的。假如我们写每一篇文章，我们就会建立一篇文章 JSX 宣传单页太不太现实，费劲，不易维护保养。我们自己的开发者更爱使用这些 Markdown 写文档。

幸运的是，Next.js 容许大家应用 Markdown 做为文章中的数据库，依据文件名形成动态路由，完成文件具体内容 HTML 静态化。

1.撰写本作用时，最好是终止 Next.js 服务项目（Ctrl | Cmd C）。

2.下面，在工程网站根目录中建立 articles 文件夹，你 Markdown 比如：articles/article-01.md，MD 文件文件格式如下所示：

我们将要文档文章的标题名字、文档叙述和建立日期放在一边 — 中间，Front-matter 这一 npm 鉴于此文件格式，外挂能够载入以上有关数据抓取文件文章的标题、叙述和建立日期。 MD 文档格式化硬盘为网页页面方式，还需要组装 remark 和 remark-html 这俩个npm 组装指令如下所示：

3.组装结束后，应完成载入和格式化硬盘 MD 文档功能的，随后建立 lib/posts-md.js 专用工具函数公式文件。getFileIds(dir) 函数公式回到一个 MD 文件名二维数组(不包含 .md 后缀名的文件名)，示例代码如下所示:

在取得文件名二维数组后，我们应该展开分析 MD 主要内容，如文件文章标题、叙述、建立日期、主要内容HTML示例代码如下所示：格式化硬盘等：

您将会留意到我用了日期格式化硬盘作用，其功能定义是 lib/dateformat.js 示例代码如下所示：文件：

4、Next.js 应用带 [ ] 特殊字符文件名形成动态路由。下面，大家在 Pages 在目录下建立此独特文件 pages/articles/[id].js， Next.js 应用id做为路由器主要参数形成 /articles/article-01 页面路由器。

pages/articles/[id].js 在文件中获得Next.js 独有的 getStaticPaths() 函数公式作用（Static Generation），比如，本实例将于新项目建设中形成指定路由器途径 articles 目录下的 MD 文档回到下列二维数组文件格式，id 将配对 pages/articles/[id].js 相对应的 [id] 动态路由的主要参数形成：

启用这种方法 lib/posts-md.js 文件里载入 getFileIds 示例代码如下所示：

5.动态路由形成后，必须完成 MD 具体内容格式化硬盘3D渲染，大家完成Next.js 与众不同的多线程法 getStaticProps({ params })，在工程建设过程中启用此函数公式（Static Generation），根据 id 主要参数启用 lib/posts-md.js 文件中 getFileData() 定义方法，将 MD 文档的内容多线程回到包含 postData 特性部件内部结构(第六点代码一部分)，示例代码如下所示:

6.读取数据后，我们应该填好部件模版，以更加友善的方式表明。 pages/articles/[id].js 里撰写JSX将文章嵌入在下节部件模版中，示例代码如下所示：

最终，我们应该重新启动 Next.js 假如一切正常，你就会发现一切 MD 可以通过文档 /articles浏览器上查询文件位的途径， 比如 相匹配 /articles/article-01.md这一 MD 实际效果如图所示：

拥有与博主相关的信息页面，我们应该建立一个博主列表页面，依照文档建立时间的顺序排序

最先，我们在这里 lib/posts-md.js 在文件中，界定一个 getAllFiles() 方式获得特定目录下的文件列表：

将 MD 将文档内容读取到二维数组中，并依据文章中的日期将无的内容文件倒序排序。2.下面，我们将要创建一个新的博主列表页面 pages/articles/index.js，建立异步方法 getStaticProps()在工程预制构件中，启用大家刚刚所写的方式 getAllFiles()，将文件列表具体内容回到部件 postData 例代码如下所示：

3.下面，我们应该导出博主列表内容 pages/articles/index.js 表明页面，应用二维数组 map() 以上方式迭代更新剖析 postData 示例代码如下所示：

4.你可能会留意到我列举了以上代码元件的理解是 components/pagelink.js 在文件中，了表明文章的标题、连接、叙述、日期等，示例代码如下所示：

这儿实现了博主列表页面的所有作用，并用浏览器中键入 预览效果如图所示：

每一个 MD 本页将列举全部文件。伴随着具体内容的提高，你需要加上有关逻辑性开展分页查询在这儿你必须使用这些 getStaticPaths() 此方法必须将这一页面更改成 pages/articles/[index].js（注：index能用自己想要的主要参数替代，但需要和getStaticPaths 方式中的主要参数相匹配)，在搭建页面时形成对应的页面路由器，您可以参考一下第一部分MD大家可以考虑到如何做到文档形成动态路由具体的逻辑性，这儿不会再详细介绍；

为了能让消费者比较容易访问我们自己的个人博客，我们应该重新建立 components/navmenu.js 完成网址导航的功能导航栏部件，因为作用简易，这里不会表述，示例代码如下所示：

导航栏部件结束后，我们将要其引进 components/header.js 在模块中，示例代码如下所示：

系统重装后的 JSX 代码如下所示：

博客导航效果如图所示：

在这儿，一个基本 MD 这儿实现了文档简单地个人博客。最终，我们要为站点加上设计风格，不然网址会好难看。

Next.js 可以用 Sass, Less, PostCSS, Styled JSX, CSS modules、plain old CSS在这儿我们要用各种手段为站点加上款式 Sass 为站点加上款式，接下来我们手动式组装新项目Sass：

下面，我们能将这些样式的界定为每一个部件，随后把它合拼一起 styles/global.scss 在文件中，由于这篇文章的关键是Next.JS 这里不介绍怎么写了Sass，有兴趣的学生们可点击文尾阅读免费下载文中 Sass 款式：

最终，我们应该凑合 styles/global.scss 引进到 pages/_app.js 在这个特殊的文件中，的网站全部页面都可以用这种风格，示例代码如下所示：

最终，我们重新开始 Next.js 服务项目，你将看到一个非常好看的博主首页，如图所示：

因为篇数的主要原因，本篇文章到这里，一篇都是基于 MD 文档简单地个人博客已完成。根据本文，大家学了怎样根据它MD文档形成动态路由，进行文章页、列表页、导航功能，为站点增加漂亮设计风格。再下一篇文章中，根据页面数据渲染具体内容（服务端渲染），为个人博客加了一个黑暗模式，如何更好地编译程序个人博客 Node.js 网络服务器或纯静态数据布署最后将给予完备的新项目源代码。...