【化蛹为蝶】新系列首发 Koa + React + Next + Antd + TypeScript

诸君，好久不见。

入职了新的公司，虽然找回了轻松愉快的生活状态（1075），但也逃不过头秃的窘境。

由于在新环境里的技术栈：Koa + React SSR，所以最近也在思考该输出个什么系列比较贴合个人发展。

家里老婆有建议我：既然工作上使用了 React，那个人用 Vue3 也不错。

毕竟老婆单位用的 Vue3 …

（以为我不知道让我用 Vue3 我就可以更方便解决她遇到的问题吗 ε=ε=ε=┏(゜ロ゜;)┛）

终究还是要考虑各方面因素：

1. 前几年一直使用的 Vue2，后面一定是 Vue3 的天下
2. 当前工作上用的 React，之前的工作项目里没有用过 React，还需要多多使用
3. 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

咱们的车今儿就开到这儿了，我们下期再见 (✿◡‿◡)