【金秋打卡】第6天 Next.js+React+Node系统实战，搞定SSR服务器渲染

课程名称：Next.js+React+Node系统实战，搞定SSR服务器渲染
章节名称：第1~3章
讲师姓名：Tomas

课程内容

前三章内容是基本的课程介绍、项目的初始化、开发环境配置和基本页面layout写法。

初始化配置

创建项目：npx create-next-app@latest —typescript
启动项目：npm run dev或者yarn dev
访问项目：http://localhost:3000

申请好GitHub账号

• 把公钥贴到GitHub上
• 设置user.email和user.name
• 配置仓库
• my-blog

配置VSCode + ESLint + StyleLint + Prettier工程环境

• ESLint：主要用于代码校验，能够在开发阶段发现很多潜在问题，强烈建议配置
• StyleLint：主要用于对CSS样式进行代码格式化，强烈建议配置
• Prettier：主要用于代码格式化，可以让大家的代码风格趋于统一，方便后续维护迭代，强烈建议配置

ESLint在VS code里装插件，ESLint
已经有.eslintrc.json文件，不用创建文件
添加eslint官方推荐的扩展： eslint:recommended

yarn add eslint -D

StyleLint在VS code中安装插件，Stylelint

yarn add stylelint stylelint-config-standard-scss -D

创建文件 .stylelintrc.json
Setting中的设置，Editor:Code Actions On Save中把source.fixAll.stylelint为true
Prettier在VS code中安装插件，Prettier - Code formatter

在真实的工作场景中，前后端工作基本都是并行的，一般都是互相约定好接口API后，分别进入开发。所以需要我们能够根据接口API自行模拟Mock数据，方便我们进行页面开发。

Mock常见有3中方式：

• 直接写死数据在项目中，使用setTimeout模拟接口延时
• 本地起一个Node服务，配合mock.js生产假数据，自己实现接口API
• 使用已经搭建好的在线Mock服务，比如Postman、EasyMock等
  情况
• 第一种方式最简单，但是会导致脏代码比较多
• 第2种方式最灵活，但是开发工作量比较大；
• 第3中比较快速，并且更接近于实际开发场景，但是配置数据不是很灵活。

Next.js由于已经内置了提供API服务的能力，所以这里我们选用第2种方式，使用mock.js来生产Mock数据，并且不用自己搭建Node服务了。

yarn add mockjs
yarn add @types/mockjs -D

课程收获

学习到了格式化工具的使用，还有利用Next.js的服务搭建mock请求。

截图