在Next.js上写博客：生成静态索引页

这是一篇关于我如何在Next.js上黑掉一个简单的博客系统的元贴文。

因为我正在构建一个谈论JavaScript生态系统的网站，所以我自然想要一个博客引擎：

自从NeXT发布以来，我一直是它的铁杆粉丝，以至于我想试着把它作为一个出版系统来使用。

我曾尝试过像盖茨比这样的图书馆，但我认为它不适合我。我发现盖茨比的API非常庞大和复杂。我喜欢这个项目的使命，可以看到Gatsby对大型组织非常有用，但我喜欢占用空间小的API，它们大多适合我不断耗尽的内存。

Next的核心(也是有争议的)特性之一是其PHP风格的基于文件系统的路由。这使得写一篇新的博客文章就像创建一个新文件一样简单。我选择了在MDX中创作我的帖子-这是一个标记的超集，允许您在Reaction组件中散布。通过将@next/mdx添加到我的next.config.js中，NEXT使用它基于文件的路由呈现了所有这些MDX文件。相当甜蜜。

不幸的是，我仍然需要一个缺失的部分--一种收集我所有帖子列表并生成索引页的方法。

我的目标是创建一个index.tsx文件，并利用它的getStaticProps定义在构建时生成一个完全静态的索引页。

从帮助器/路径导入{getPages}；导出常量getStaticProps：=async()=>；{return{props：{post：await getPages('；blog'；)}，}；}；导出默认({post})=&>；{//呈现索引

MDX文件可以使用有关文档的信息指定元导出-可以将其视为Markdown的主要内容，但用JavaScript表示。这是一个存储帖子标题、发布日期和相关标签等内容的方便位置。下面是这个帖子的一个例子：

Export const meta={pub：true，title：'；blog on Next.js：Fun with static道具'；2020-08-01T01：43：16Z'；，tag：['；tyescript'；，'；tricks'；，'；meta'；]，}；//下面的实际帖子内容...。

为了生成我的索引页，我必须从/blog目录中的每个MDX文件收集元数据。幸运的是，NeXT让这一切变得轻而易举。

获取帖子列表非常简单--只需使用Node的文件系统即可。由于getStaticProps总是在Node.js环境中执行，因此您可以访问所需的任何标准库或NPM模块。

从'；path'；；从'；fs'；导入{Promises as fs}导入路径；从'；fs'；导出异步函数getPages(rootPath：string，)：<；[]>；{const postFileNames=await fs。Readdir(RootPath)；

现在我有了一个文件名列表，我必须弄清楚如何加载和解析所有这些MDX文件。起初，我认为我必须读取文件并找到运行时MDX解析器，但后来我想知道是否可以依赖@NEXT/MDX？

结果是@NEXT/MDX修补了NEXT的模块加载器，使MDX成为一等公民！导入MDX文件会在幕后将其传输到JS-该插件会重载动态请求调用：

Const post：[]=postFileNames。Map((Name)=>；{const blogPostModule=Required(`../page/${rootPath}/${name}`)；const slug=path。Parse(名称)。Name；const urlPath=`/${rootPath}/${slug}`；return{...blogPostModule。Meta，path：urlPath，slug，}；})；返回帖子；

就是这样！NeXT向开发人员展示的功能和灵活性给我留下了深刻的印象，以及我如何能够在没有过度配置或任何抽象层的情况下复制Gatsby中的大量价值。我真的很高兴看到这个平台的发展，并通过增量静态再生等新功能来改进我的索引页面策略。

请继续关注，了解我如何扩展此功能以静态生成RSS提要。