NextJs 与 Tailwind 入门开发笔记

前言

距离上次更新已经过去好久了，之前我在 StarBlog 博客2023年底更新一览的文章里说要使用 Next.js 来重构博客前端，最近也确实用 next.js 做了两个小项目，一个是单点认证项目，另一个是网站的新主页，都还处于开发中，本文记录一下 next.js 使用过程遇到的一些问题和感受。

对了，还有标题里提到的
tailwind
，我去年开发
AIHub
的时候就用上了，因为它和 next.js 这俩组合经常一起出现，本文也一起写了。

PS：本文的篇幅较长，所以拆分了网络请求封装的部分作为独立的文章先发布了；

Next.js 的学习和开发才刚刚开始，后续还有很多需要研究和记录的，本文也许会成为一个新系列？

关于 Next.js

以下是官方的介绍：

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more. This allows you to focus on building your application instead of spending time with configuration.

Whether you're an individual developer or part of a larger team, Next.js can help you build interactive, dynamic, and fast React applications.

以下是我的看法：

Next.js 是一套 React 体系的 SSR （服务端渲染）方案，现在很多前端网站实际上是 SPA （单页应用），就只有一个 index.html ，然后附带一个很大的 js 来实现页面渲染和交互，这种小规模的网站还好，网站越大速度就越慢，所以说技术这个车轮又滚回去了，当初被「前后端分离」那帮人嫌弃的后端渲染又回来了，React 有 next.js ，隔壁 vue 有 nuxt.js ，做的事情就是用 node.js 这个后端来渲染页面。

不过 next.js 也不完全是这么简单粗暴，除了后端渲染，它还能像 hexo / hugo 这类静态网站生成器一样生成网页，区别在于 hugo 是根据 md 生成网页，而 next.js 是把 jsx 渲染HTML网页，这样就可以无需依赖 node.js 后端，当成普通的静态网页随意部署。

当然交互也是没问题的，next.js 的组件分成两种，前面说的后端渲染或者生成静态网页的是 server 组件，这种是实现点击按钮就数字加一这类 react 经典操作的；另一种是 client 客户端组件，就跟普通的 react 应用一样了，可以使用 hooks 来操作 DOM。

对我来说，next.js 更大的意义是一个好用的 react 脚手架，React 的生态总让我感觉有点碎片化，原本的 CRA（create react app）实在是有些简陋，很多功能都没有，如果从零搭建一个网站的话，用 CRA 要折腾的东西比 vue-cli 多一些。

next.js 就完美解决了这个问题，自带路由啥的乱七八糟的东西，开箱即用，而且目录结构给限制得明明白白，直接按它的规范写就完事了，再也不用纠结什么
ComponectA/index.tsx
和
Components/A.tsx
之类的东西了，拒绝精神内耗！