诸君，好久不见。
入职了新的公司，虽然找回了轻松愉快的生活状态（1075），但也逃不过头秃的窘境。
由于在新环境里的技术栈：Koa + React SSR，所以最近也在思考该输出个什么系列比较贴合个人发展。
家里老婆有建议我：既然工作上使用了 React，那个人用 Vue3 也不错。
毕竟老婆单位用的 Vue3 …
（以为我不知道让我用 Vue3 我就可以更方便解决她遇到的问题吗 ε=ε=ε=┏(゜ロ゜;)┛）
终究还是要考虑各方面因素：
- 前几年一直使用的
Vue2，后面一定是Vue3的天下 - 当前工作上用的
React，之前的工作项目里没有用过React，还需要多多使用 -
Vue3可以更有效帮助 他人，也能够使个人技术栈技能池变深变广
因此暂定 Vue3。
···········
但是。
折腾了一圈也只找到 一个 Vue3 SSR 的解决方案：https://github.com/ykfe/ssr
里面集成了 Nest/Midway + Vue3 + And so on …
此处爆夸下
Midway自带Typescript和IOC
而我却感觉：这个方案太重了不够灵活，从头到尾整个链路 一定 会踩坑磕磕绊绊（后来尝试了下果然开发和部署都卡住了）
因此综上，再结合刚接触到的 SSR 方案
决定放弃 Vue3 改用 React （Ohhhhhhhhh）
·········
那使用什么样的搭配来干活呢？
考虑并实践了： Koa + React + Nunjucks（模板引擎）
用 Nunjucks 的话就要手动做模板管理、数据挂载、路由整合等等这些操作也太麻烦了，部署时候还要做相应的一系列操作，更别提还有 Babel 和其它一系列配置了。
真是一个嘴上说方案要灵活，真灵活了还一直吐槽麻烦的人
原本以为只能麻烦就麻烦点吧，就这样莽了~
后来觉得 NextJS 这条路还是要考虑下啊（一个 React SSR 解决方案）
本以为 NextJS 是自有体系 用就完事儿了，可那不就不够灵活了吗（又来(Φ皿Φ)）
于是乎在搜索 NextJS 时，看到这样一行字：NextJS 能够作为 Koa 中间件来使用
H ! A ! P ! P ! Y ! ``````
·········
那么
我们这个系列就开始了：
Koa + React + Next + Antd + TypeScript 开发与众不同的服务端渲染网站
（到底哪里与众不同我能说还没想好吗 ( •̀ ω •́ )y）
2021 年了还不用 TypeScript 是要怎样
·········
那今天我们先来了解下怎样创建一个
Next项目！
方法一：手动创建 Next 项目
一、初始化
npm init -f
二、安装
npm install react react-dom next
三、next命令
// package.json
"scripts": {
"dev": "next", // 开发环境启动项目
"start": "next start", // build 后启动正式的服务
"build": "next build" // 部署到生产环境执行的
}
Next 内置了一些命令，且内置了热更新等功能
四、Pages 目录下每个文件都要导出一个 React Component
1. 自动生成路由
Next 页面文件都放在 pages 目录下，且会根据目录文件名称来自动生成路由
2. 冲就完事儿了
接下来我们在 pages 目录下新建一个页面 index.js
代码如下：
// pages/index.js
export default () => <span>Index</span>;
有小伙伴会说怎么可以只在 js 文件里写 jsx 语法呢？不是还应该引入 react 才可以吗？
naive !
nextjs 都已经帮我们在全局处理好了，npm run dev 冲就完事儿了~
此时项目启动起来，我们打开浏览器访问能够看到：
完美~
方法二：create-next-app 创建 next 项目
一、安装 create-next-app
create-next-app 能够帮助我们一条命令创建出 react + next 项目
除此之外还会初始化 pages、styles、public、next.config.js 等目录/文件
使用 npm 安装：
npm install -g create-next-app
二、创建项目
执行 create-next-app ，后面跟上项目名称
create-next-app project-name
执行完毕后，项目也就创建完毕了
目录结构如下：
同样可以愉快的 npm install 安装依赖 npm run dev 启动项目并访问：
OK
咱们的车今儿就开到这儿了，我们下期再见 (✿◡‿◡)