最近博客从Gatsby迁移到了Next.js，本文记录了使用Next.js从0到1搭建博客网站的过程，以及使用的少量技术(npm包)。 Next.js vs GatsbyNext.js和Gatsby都是React生态系统中优秀的框架，都追求极致的客户体验和开发体验。 虽然两者都可以用来搭建博客网站，但是定位略有不同。 盖茨比是一个大而全的框架，有自己的插件机制和生态。各种功能都可以通过npm安装相应的插件快速实现，但是使用起来比较繁琐，概念比较多。你需要了解各种概念和插件的用法。Next.js属于小而美(不代表功能弱)的框架。具有Vercel产品一贯的美感，开箱即可使用。没有很多自创的概念和插件使用，直接连接npm生态。 初始化项目关于Next.js的使用以及如何构建新项目。参考官方文件就行了，这里就不赘述了。 建议在实际开始项目之前粗略浏览一下文档，对Next.js有个大概的了解 TailwindCSSTailwindCSS是最近比较流行的CSS框架。它提供了大量Utility-First的原子类，可以帮助你快速实现页面样式，无需编写任何CSS文件。 个人认为TailwindCSS有以下几点:开发速度快，不用手写CSS能保证项目整体设计风格的一致性，包括颜色、边距等。设计更加灵活，易于定制，而不是像Bootstrap那样一眼就能识别你的页面是否在使用Bootstrap；不需要大费周章的给类命名；TailwindCSS是基于PostCSS实现的，Next.js默认内置了PostCSS和少量配置项，所以在Next.js项目中使用时需要自己设置PostCSS的配置文件。 幸运的是，修改这些配置并不繁琐，官方的TailwindCSS文档提供了在Next.js项目中使用的教程。参考官方文档即可:用Next.js安装TailwindCSS(Tailwind CSS文档)自定义Post CSS Config (Next.js文档)。当然，你完全可以不使用Tailwind CSS。Next.js支持CSS模块、Sass/Less、js中的CSS等方式，可以根据自己的喜好选择。 不过我强烈建议你试试TailwindCSS，真的很好用。 当数据采集项目设置好后，你需要采集数据，也就是页面上显示的博客内容。 我没有使用其他的CMS来管理这些数据，而是直接编写Markdown文件，保存在项目的内容目录下，然后在项目编译阶段读写这些文件生成静态页面。 Next.js支持服务器端渲染和静态文件的直接导出。 js中的所有页面默认导出一个React组件。如果需要在编译过程中获取组件所需的数据，可以通过名称导出一个getStaticProps函数。Next.js会在编译时执行函数，并将函数返回的数据以props的形式注入到页面组件中。 博客主要由两个页面组成，一个是首页，显示文章列表；一个是文章页面，显示文章的具体内容。 以主页为例，代码大致如下:导出默认函数home({ posts }){//省略页面组件内容}导出异步函数get static props(){ const posts = get postlist()；返回{ props:{ posts } }；}文章页面也一样，在getStaticProps中获取文章介绍即可。 getStaticPaths中的文章数量是不固定的，所以我们的文章页面本质上是一个通用的模板，文章是通过路由显示的。在代码中，文章页面位于pages/posts/[slug]中。jsx，而slug被用作路由参数。 但是在编译的时候，Next.js不知道你有多少文章，需要生成多少静态页面。 这时候我们需要用getStaticPaths告诉Next.js需要生成多少个页面。就像getStaticProps一样，我们可以导出一个在页面文件中命名的getStaticPaths函数。 GetStaticPaths需要返回一个对象数组，每个对象代表一个页面，包含页面的几个参数。这里我们只需要一个名为slug的路由参数。 返回值的具体格式参考Next.js官方文档。 文章大致代码如下:导出默认函数postitem({ post }){/省略页面组件内容}导出异步函数get静态props({ params }){ const post = awaitgetpostbyslug(params . slug)；返回{ props:{ post } }；}导出异步函数getstatic paths(){ const slugList = getpostsuglist()；return { paths:slug list . map((slug)= & gt；({params: {slug }，//这个params可以在getStaticProps })的参数中获取)，fallback: false，}；}Markdown解析文章以纯文本的形式保存。上面伪代码中的getPostList、getPostBySlug等函数是读取文件并解析后返回正格式的对象。 读取文件是通过Node.js的fs模块实现的，没什么好说的。 文章的Markdown文件格式如下:-标题:文章标题日期:2021-01-31 12:01:54-下面是Markdown格式的文章内容。可以看到是yaml格式的Front Matter，用来写少量的文章信息。标题、日期等。可以根据自己的喜好定制；以下是Markdown格式的文章内容 这里使用了两个npm包来解析Markdown文件:gray-matter用于将Front Matter从文章内容中分离出来，Front Matter解析成JS对象；使用remark将上一步中分离的文章内容解析为HTML格式。使用remark时，需要使用几个相关的插件，有点麻烦；使用remark时，可以使用remark-prism突出显示代码。记得在文章页面导入一个prism的主题CSS文件，否则文章中插入的代码不会高亮显示。 博客其余部分的所有页面布局都是统一的。比如顶部的导航和底部的版权信息都显示在所有页面上，那么把它们写满每一页肯定是不现实的。这时候可以设置自己的App实现统一布局，在Pages目录下新建一个new _app.jsx即可。 参考具体的官方文档或者这个项目的源代码。 谷歌分析博客使用谷歌分析进行访问统计。根据Google的文档提醒，需要在所有页面的head标签中插入两个script标签。 _app.jsx用来自己设置body标签中的内容，显然不适合它的实现。这个时候你可以自己设置文档来实现这个需求。 参考具体的官方文档或者这个项目的源代码。 部署Next.js是由Vercel开发的，所以把项目部署到Vercel上再合适不过了。简单方便，个人客户有一定的免费额度，个人博客完全够用。 首先将代码上传到GitHub，然后在Vercel中创建新项目。授权并选择相应的代码库后，会自动拉取代码并部署，在代码升级时自动重新部署。 参考本博客的源码库，用Next.js安装TailwindCSS自定义Post CSS配置数据取数Next.js官方文档Tailwind CSS官方文档Gray-mattermarkprismNext.js on ver cel参考地址:用next . js建立个人博客