js json制表符报错_Next.js + TypeScript 搭建一个简易的博客系统

最近想攻关一个 node.js 框架。希望找到一个能够帮我们把大部分事情都做好的框架，可以直接上手快速开发。不像传统的 Express、Koa 需要配置大量中间件。按照这个想法，谷歌了一下就是 —— Next.js 了。最后完成了一个简易的博客系统，

代码地址: https://github.com/Maricaya/nextjs-blog

预览地址：http://121.36.50.175/

不得不说 SSR 真香，几乎没有白屏时间，加载非常快。

来记录下学习(踩坑)的过程，这篇文章的代码都在https://github.com/Maricaya/nextjs-blog-1啦。

先来看看 Next.js 是什么吧。

Next.js 是一个全栈框架

Next.js 是一个轻量级的 React 服务端渲染应用框架。

它支持多种渲染方式：客户端渲染、静态页面生成、服务端渲染。

使用Next.js 实现 SSR 是一件很简单的事，我们完全可以不用自己去写webpack等配置，Next.js 都帮我们做好了。

弱项

上面讨论了 Next.js 的很多优点，但每个框架都有不完美的地方，尤其是在 Node.js 社区。

作为一个后端框架，Next.js 完全没有提供操作数据库的相关功能，只能自行搭配其他框架。(比如 Sequelize 或者 TypeORM)。

也没有提供测试相关功能，也需要自行搭配，可以选择 Jest 或者 Cypress。

现在我们基本了解了 Next.js，接下来跟着官网做一个简单的项目吧。

创建项目

# nextjs-blog-1 是我们的项目名称

选择 Default starter app。

进入 nextjs-blog-1，用命令行启动项目 yarn dev。

看到下面这个页面👇，就说明你的项目启动成功啦。

下面我们为项目加上 TypeScript！

启动 TypeScrip！

第一步就是安装 TypeScript。

yarn global add typescript

创建 tsconfig.json

然后我们运行 tsc \--init，得到 tsconfig.json，这是 TypeScript 的配置文件。

接下来安装类型声明文件，然后重启项目。

yarn add --dev typescript @types/react @types/node
yarn dev

然后我们将文件名 index.js 改为 index.tsx。

创建第一篇文章

根目录下创建 posts 文件夹，我们的文章放在这个路径下。

创建 posts/first-post.tsx 文件，写入代码：

// 第一篇文章