Nextjs 教程已经鸽了好久，最近准备趁着折腾网站的机会，把教程补完。这回迭代网站主要是想把网站国际化，支持多种语言切换，之前的网站在设计的时候没有考虑这方面，再加上那个时候对 Nextjs 也没啥经验（现在也一样 🤣 ），代码编写的不够灵活，直接在原有代码上改有点蹩脚，所以打算直接重构，趁此机会正好可以记录一下整个过程。

本来我打算再次鸽了 Nextjs 教程，整个教程当时写了一半左右（貌似我好多教程都写了一半……），一直没有上传到博客。当然没写完并不是不更新的理由，主要是人懒，再加上突然出现了一个叫 Remix 的框架，看了它的官方文档，跟着官方案例流程走了一遍，感觉比较适合我这种搞后台的人。

Remix 框架的优点很多，例如它的嵌套路由机制、数据管理方式、代码书写结构等等，有很多点正好捅在我的 G点上，感觉比 Nextjs 更适合团队开发。但是 Remix 目前还是不够成熟，至少没有 Nextjs 的周边强大，自己纠结了好久，最终还是继续我的 Nextjs 教程吧，Remix 有机会也写一期，前提是不犯懒的情况下。

1. 需求

在开发网站之前，我们首先需要简单的确定网站的大概方向，换句话说就是咱们的网站主要实现什么功能，有哪些技术难点需要突破，下面是目前我能想到的点，仅供参考：

1. 网站需要建立几种页面模板。包括不限于主页、文章页面、分类页面、搜索页面、关于页面、下载页面等等，具体可以根据自身的需求来决定，其中最好按照页面的结构进行分类，例如博客的所有文章都可以通过文章页面模板来统一渲染，我自身的网站目前搞了三类模板。
2. 网站的内容主要基于静态页面。博客文章用 Markdown 的方式存储，当访问某个链接的时候，系统可以自动查找该连接对应的文档进行渲染。
3. 网站的路由系统。网站的路由系统抛弃 Nextjs 默认支持的静态路由，改用更加灵活的自定义模式，缺点是需要对所有页面设置对应的 URL，好处是解除了目录结构的限制。
4. 实现网站 SEO 相关功能，包括 SEO 头部、sitemap 文件、结构化数据等等。
5. 实现页面相关组件，包括加载动画、代码高亮组件、文章目录组件、文章评分组件等等。

列表中只是简单的介绍，其实每个功能点都有很多蛋疼的细节，只有深入其中才能感同身受。

2. 方案

简单的聊了聊需求，接着阐述下目前我在博客系统中使用的解决方案：

博客系统的数据主要来源自 Markdown 文档的内容，因此我的设计思路是先从现存的 Markdown 文档读取数据，其次通过翻译器将现有文档翻译成多国语言，最后将文档内容插入到数据库，而这些操作是在博客系统启动之前完成的，换句话说 Nextjs 后端的数据交互主要是和数据库进行的。

之所以这样做，主要是因为博客除了网页内容之外还包含很多其它的元信息，例如文章访问量、文章评分、文章评论等等，这些数据都需要做持久化操作，如果只是用文档来存储显然是比较麻烦的，因此我用数据库做了一个中转，这样既可以方便这些额外元数据的存储，也方便 Nextjs 读取查询文章内容，毕竟数据库的查询比你自己写代码查文件内容要方便的多，速度也快的多。

目前我使用的数据库是 SQLite，一个轻量级的数据库，使用起来非常方便，后期可以研究添加全文检索功能，SQLite 是支持的，不过貌似需要自己编译，暂时可以先搁置，等准备实现的时候在研究，毕竟博客目前一共也没几篇文章，所以搜索其实也用不上。

这一次迭代，我准备使用 Prisma 操作数据库，这是我在 Remix 教程中发现的一个好用的 ORM，目前线上的系统并没有使用任何 ORM 系统，因为一共也没有几行查询代码，所以直接手撸的，这一次准备稍微学习一下 Prisma，感觉它很好很强大，推荐大家了解一下。

除了后端还有前端部分，因为使用的是 Nextjs，所以前端大概率是使用 React，否则貌似也没有必要使用 Nextjs，为了前端显示方便，这里还是用了 Tailwind CSS 框架，该框架整体还是偏底层，但其预设了很多样式名称，比较适合我这种网站设计文盲，它们官网还提供了一些额外的开源组件级代码可以借鉴。我对 Tailwind CSS 也是掌握一点皮毛，再加上研究过一点 CSS，整体感觉 Tailwind CSS 还是比较适合 CSS 新手使用的。

我以前接触的基本上都是组件级别的框架，例如阿里的 Ant Design、Sencha 的 Extjs 等等。这种类型的框架入门更加简单，直接拿来就可以用，但是灵活性相对来说差一些。tailwindcss 在我看来属于第二层次的框架，它仅仅对 CSS 进行了一层很薄的封装，如果你对 CSS 一点不了解事实上无法直接使用的，但是组件级的框架不会，使用它们可以无需掌握 CSS 布局，只需要无脑调用即可，这次逼着自己使用 tailwindcss，也算是自己对 CSS 额外巩固的过程。

3. 准备工作

要想使用 Next.js，按照官方的要求需要我们有一台 PC 电脑作为开发环境，该电脑上需要预先安装 Node.js 12.22.0 或其更高的版本。这里推荐直接安装 Node.js 官方的最新稳定版。

有了运行环境之后，还需要准备一个代码编辑器，这里推荐使用 Visual Studio Code，你可以直接在官方进行下载安装。

剩下的就是创建项目，并初始化 Nextjs 和 Tailwind CSS。安装过程在 Tailwindcss 官网指南上，专门用了一篇文章介绍了 Next.js 和 Tailwind CSS 框架结合的方法。

过程非常简单，我这里简单的描述一下：

第一步先初始化 Next.js 工程项目，可以直接执行：

npx create-next-app blog
cd blog

命令后面的标识可以是任何你想要创建的工程名称，这里输入了 blog。命令执行完毕后，脚本会自动生成对应的目录结构。

因为接下来需要使用到 tailwindcss 框架，所以第二步需要引入该框架代码：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

第三步，我们需要修改 tailwindcss 的配置文件，指定 Next.js 中使用到 tailwindcss 变量的所有文件。

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

这样做的目的是因为 tailwindcss 在编译的过程中，需要动态确定工程中用到了哪些 CSS 的原子类，只有使用的原子类才会被编译到最后的程序中，主要是为了压缩 CSS 文件的体积。而这里指定文件路径的目的就是要告诉 tailwindcss 使用到原子类的文件有哪些。

最后一步，删除 styles/globals.css 文件的内容，将 Tailwind 的每个层的 @tailwind 指令添加进去：

@tailwind base;
@tailwind components;
@tailwind utilities;

默认 styles 文件夹下其余的文件全部删除即可。接着修改 pages/index.js 文件内容如下：

export default function Home() {
  return (
    <h1 className="text-center text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

除此之外，api 文件夹下的 hello.js 文件也可以删除，目前用不上，以后需要的时候再加回来即可。

一切搞定，在终端执行下面的命令：

npm run dev

最后使用浏览器打开 http://localhost:3000/ 就可以看到界面中间的 Hello World!。