王志远 微医前端技术部
前言
前段时间在公司接手了个数字化运营平台项目，技术栈是 next，之前没接触过，于是借助这个五一临阵磨枪了下，这就是我们【保姆级指南：只需 cv，实战中学习 next】专栏的背景了。
本文也是整个系列的开端，废话几句，以后一切直奔主题（并不会，本菜是话痨）
我们在学习中会遇到很多大神，也会很羡慕 TA 们的牛，于是倾拜之下慕名求教学习之路，大师笑而不语，发来三个字：看文档。
我是真的明白文档的靠谱，我也是真的觉得枯燥，看着一行行的 API 在眼前略过，别人我不知道，至少我的心情是复杂的。
在心里默默告诉自己：“大神是不会有错的，看文档看文档”，一遍又一遍，从不会觉得厌倦，但事实上，反感的情绪一层层上来。
之前在学习极客时间《如何成为学习高手》专栏里有个理念，一下子击中过我：“意志力是资源，每一次抵抗都会消耗它”，醍醐灌顶，这就是为什么每次锻炼完都想吃一堆好吃的犒劳自己的原因？
不管怎么说，在看文档的道路上，我只学习到了自己是个菜狗的巨大领悟。文档不可或缺，但因人而异，阶段不同，大佬拿来查漏补缺自然轻车熟入；但本来就在放弃和自我鼓励的分界线上挣扎的新手小伙伴们，看文档是个很艰难的路，至少我承认了我是菜狗。
那怎么办呢？总不能不学了吧（那敢情好！），分享个学习体验：实战中学习。这是个很多人知道，很少人做到的事情，因为实操往往会踩坑，一踩坑就容易放弃。这也是本专栏的出发点。
本专栏文章特点
- 学以致用：先看原理，然后只需 cv，你就能完成相关知识点的实战
- 版本锁定：依赖包的版本锁定，避免版本更新导致的问题（不用 docker 的原因是，学习项目呀！你得自己实操）
- 验证标准：均有最终效果 gif，看动图验证是否成功
- 成就感保证：按文章一步步走，一定能有成效（这里安利下本人的另一篇文章，用过都说好：保姆级指南：jekins+docker 构建部署 react 项目实战）
最重要的是，知识点拆分推动实战！我们不是为了写个 demo 项目，每个实现都有对应的知识点，整体流程本菜也亲身重新跑着验证过，亲测有效！
至此，我尽力了，快快一起学起来吧！
系列文章目录
- 最小单元跑起来 next 项目.md
- 路由守卫 -- 实现全局 loading.md
- 路由守卫 -- 受保护的路由.md
- next 支持 css.md
- 集成 antd.md
- 集成路由.md
- 服务端渲染钩子 -- getInitialProps.md
- koa 集成 next 作为中间件.md
- 集成后端服务.md
- 动态组件-实现用户信息组件.md
- 集成 redux -- 实现登陆逻辑.md
- 发布上线 -- pm2 发布 next 应用
本次项目依赖版本如下
- typescript@3.7.4
- react@16.12.0
- @types/react@16.9.17
- react-dom@16.12.0
- @types/node@13.1.1
- next@9.1.6
- axios@0.19.0
实现目标
访问路由显示Hello Next
实现步骤
初始化项目
找到路径，创建项目目录，进入项目目录后初始化
npm init -y
安装依赖
yarn add --dev typescript@3.7.4 react@16.12.0 @types/react@16.9.17 react-dom@16.12.0 @types/node@13.1.1 next@9.1.6 axios@0.19.0
新建路由
next 采用的是约定大于配置的思想，项目根目录下pages的 js（或 tsx）文件都会被映射路由，所以我们只需要创建一个文件就完成了最基础路由配置，我们用下面一条命令完成如下动作
- 创建
pages目录 - 创建
pages目录下的index.tsx文件并写入Hello Next内容
mkdir pages && cd pages && cat > index.tsx <<eof
export default function () {
return (
<div>Hello Next</div>
)
}
eof
启动项目
我们用 next 启动项目，先配置下package.json文件
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
再执行下命令即可，默认 3000 端口
npm run dev
**优化：**这里我们可以做个小优化，实现快捷键一键启动，放在文末分享
测试效果
可以浏览器直接访问http://localhost:3000/，出现如下内容代表成功
可以执行 curl 模拟请求查看返回确定是否启动成功；
curl http://localhost:3000/ | grep 'Hello Next'
优化
实现快捷键一键启动项目
配置项目任务
vscode 存在配置文件.vscode，其下的tasks.json可以配置项目任务，执行如下命令即可将npm run dev绑定在任务test上，按如下步骤实现即可，具体可参考vscode 项目配置
mkdir .vscode && cd .vscode && cat > tasks.json <<eof
{
"version": "2.0.0",
"tasks": [
{
"label": "runNode",
"type": "npm",
"script": "dev",
"group": {
"kind": "test",
"isDefault": true
}
}
]
}
eof
配置快捷键绑定
此时再配置下快捷键绑定，将 test 任务放在一个快捷键上，按如下步骤实现即可，具体可参考自定义快捷键
command+shift+p启动命令面板，输入keyboard选择Open Keyboard Shortcuts进入快捷键配置页
在筛选框中输入run test Task，双击后依次按下command+t（或者其他快捷键），回车，即完成了绑定
尾声
我有个leader对我说过一句话，记忆犹新，他说：追求到最后，会发现最终要的是共赢；希望这篇文章对你们能有帮助，也希望自己：笔耕不止，坚持成长。
