使用Next.js搭配tailwindcss纯手工打造一个网站是什么样的体验

我曾经2022年初，给自己定了一个目标，要把微言码道官网重新改版。这次趁着节前休假有时间，花了几天的时间对网站进行了彻底的重写与改版，实现了这个目标。

一）

微言码道的官网是我在2021年初花了约三天时间完成的。当时的版本是基于gatsby以及MUI构建而成。

由于是基于Jamstack理念而构建的这个网站，网站是从零开始构建的，包括UI。并没有使用一些博客类的网站生成工具，比如著名的hexo以及hugo等。

2022年想要彻底重写这个版本的网站的原因在于两个方面，其一是重新设计并实现一套全新的令自己满意的UI，再就是在前端尝试与使用一些感兴趣的新技术。

所以，这次的重写选择的是Next.js与tailwindcss技术，这两个技术都是现在前端比较有特色及非常流行的框架。

二）

首先聊下Next.js这个框架吧。

在前端，有两个框架一定为大家所熟知，就是React与Vue。现在前端开发主流都是这两个，区别无非是有些人喜欢React，有些人喜欢Vue而已。

而React与Vue的这两个框架的一个最大区别在于，React是一个核心类库，而Vue是一整套解决方案。也就是React只提供了核心的能力，但做一个前端，不仅仅是JS核心能力，还需要路由(如React Router)，构建管理(如Webpack)，状态管理（如Redux）等诸如技术的搭配合作，才能完整较好的实现一个前端，因此用React的开发人员面临众多技术搭配与选择。而Vue与React不同，它本身就提供及搭配了各种解决方案，上述这些Vue都有完整的实现及搭配，使用Vue基本不需要操心这些的选择或搭配，使用它默认或推荐的就是最好的。

而Next.js则是一个基于React的一个非常流行的框架。可以把Next.js与Vue相类比，它在React的基础之上，提供了开箱即用的构建支持，路由支持，图片加载优化等支持。这意味着使用Next.js，你可以做到与Vue一样，享受到开箱即用的解决方案。

其实，坦率的看，React的劣势也是它的优势。虽然React只提供了核心的JS能力，不像Vue那般提供完整的解决方案，但这也让它的生态发展非常灵活与可能性非常大。出现了诸如Next.js等非常多及优秀的生态技术。

这次使用Next.js，也是在阅读它的官方文档后，意识到它的能力非常强大，决定使用Next.js替换掉上个版本使用的gatsby。

Next.js不仅支持SSG（静态网页生成）以及 SSR （服务端页面渲染），其部署模式也同时支持以纯静态页面部署（部分能力受限）及使用Node动态部署（支持更强大的按需页面生成等能力）

Next.js是一个非常出色的框架。难怪它是React流行排在前位的框架。

三）

再说一下tailwindcss技术。

前端的CSS的技术发展也非常灵活，除了原始的CSS以外，发展出了less,sass等带有一定编程能力的CSS框架。

上次使用的MUI，其实是React的一个UI框架，并不属于CSS层级的框架。众所周知，做为一名非前端程序员，UI设计及使用CSS实现各种样式是困难点，因此选择一个现成的UI框架是比较合适的选择。

相比较大家所熟知的Ant Design UI框架，MUI更适合非企业级前端页面。它轻，小并且对各种大小的设备支持较好。而Ant Design相对较重但有很多成熟的适合企业级需求的组件，它更适合企业级页面开发。

好，再说到tailwindcss这个吧。

最开始也是一个前端的程序员朋友在一次聊天时，无意间谈及并推荐了这个CSS框架。tailwindcss其实与MUI，Ant Design并不是同一类的东西，它不是一个UI框架。从定义上来说，它一个原子化css，以Utility-First为核心理念

使用tailwindcss的代码是这样的：

export const OSSLanguage = (props: { language: string }) => {
  return (
    <>
      <div className="w-fit h-8 flex flex-row items-center mr-2">
        <div
          className={`w-[10px] h-[10px] rounded-full mr-1`}
          style={{backgroundColor:randomColor()}}
        ></div>
        <span className="mr-1 text-sm">{props.language}</span>
      </div>
    </>
  );
};

上面这个代码就是使用tailwindcss。有过CSS经验的开发人员肯定会对tailwindcss这种风格有点熟悉又有点陌生。

因为它似乎也是使用的原始CSS这种写在HTML标签内的写法，但语法又写原始CSS差别较大

这就是tailwindcss独树一帜的特色，它的思维与众不同。针对前端开发中，CSS存在大量重复并且难以命名的难点，tailwindcss基于CSS定义了一整套内置的可反复重复使用的CSS定义。

关于tailwindcss，能说的其实挺多，这次我就基于我使用它的体验说下我觉得它的优点

优势一：减轻了编写CSS的负担

编写CSS的开发人员,有两大众所周知的难点，一是CSS命名，二则是重复CSS定义。

而使用tailwindcss，其一不需要对class进行命名，你只需要像搭积木一样，选择tailwindcss中各种现成的定义，就能快速的为页面定义好样式；其二，因为是搭积木式的方式，你也无须去为一些有些相似的页面去写大量重复的CSS

优势二：Responsive Design以及Dark mode支持

tailwindcss的设计理念是响应式设计，它天然支持各种设备大小，使用tailwindcss编写出的页面天然对各种设备大小支持非常好。

tailwindcss默认的设备就是小屏，而非电脑上的那种网页设备的大小。

<div className="w-full sm:w-1/2 text-black dark:text-white">
   1. 这个DIV默认是100%宽度，但在sm设备上(宽度大于640px的设备)，宽度是50%
   2. 这个DIV默认是文字是黑色，但在暗黑模式下为白色
</div>

以上述这个tailwindcss定义为例，你可以在同一个class中定义对不同设备的显示效果。非常方便

如果使用CSS，你需要使用CSS中的Media特性来实现，而暗黑模式则需要更多才能实现。

而tailwindcss天然支持这些

优势三：减少了非专业前端开发的CSS知识的学习

CSS其实非常复杂。

如果你是一个专业前端，你肯定会有一套《CSS权威指南》的书，这本书有上下两册，详细完整的对CSS的各种特性与知识进行了讲述。

而tailwindcss则不同，它预先定义了各种常用的CSS组合包。如同我所说，就像积木一样，tailwindcss提供的是各种积木，你按照喜欢挑选合适的搭配起来就好。

这样极大的减少了需要学习的CSS知识。使用tailwindcss的优势意味着你只需要熟悉tailwindcss中内置的这些CSS组合包，就已经足够实现一个样式优美的网页。

我们都知道二八原则，80%的样式，可能只用到20%的CSS点。

选择tailwindcss，也就是说我们只花精力在少数的20%的CSS知识点上，已经足够编写出80%的样式优美的页面了。

四）

总体感觉，使用Next.js搭配tailwindcss是非常不错的选择。特色适合那些使用React的非专业前端，做一些非企业级的网站，比如像我的微言码道这样的网站。

相比较hexo或hugo这样的博客生成工具来说，基于Next.js以及tailwindcss打造一个网站，更像是亲手打造一个艺术品，虽然都需要自己来实现很多功能，但它能让你精雕细琢。做为一个程序员，这种感觉是非常棒的。

得益于这两个非常出色的框架，微言码道新版官网我认为整体也比上个版本更为出色。更为简洁，优雅，以及有更极致的体验。