这是我参与「第五届青训营」伴学笔记创作活动的第 12 天

初识Next.js

一、重点内容

什么是 Next.js
Next.js 客户端开发
Next.js 服务端开发
项目核心功能讲解

二、详细知识点

1、Next.js产生背景

类似react前后端分离这种直接开发不适合开发C端应用。虽然可以开发SSR，但开发过程中很多步骤重复，且对新手不友好，next.js做了这些东西，且做了优化。next.js帮助我们更好更快的开发SSR、SSG项目。

2、什么是Next.js？

Next.js 是一个构建于 Node.js 之上的开源 Web 应用开发框架，支持基于React的web程序应用，例如服务端渲染、静态站点生成静态网站。

上手快，能力集全，而且覆盖了足够多的性能优化和生态。

3、同构

SSR一个很重要的核心叫同构。

同构：由于客户端服务端都会参与SSR的过程中。客户端做的事情，服务端也会原封不动再做一遍，保证客户端服务端的预期是相同的（例如模板页面的渲染、路由、head标签，客户端服务端两者代码都会参与进来）。

同构核心原因：不做同构无法保证事件的触发

4、客户端和服务器端部分为什么都要做一遍（代码）

只要保证模板一样，页面可以正常显示，显示也是一样的。

但是html可能会绑定一些事件，触发事件（例如onclick）是在js里面处理的。如果没有做同构，服务器端没有做相同的事情，（例如onclick）不会触发，相当于绑了一个空的事件。

5、脱水、注水

为什么要有脱水、注水部分？客户端拿到的页面初始化数据和服务器端数据对不上。

代码中通常会注入数据，然后这个数据作为初始化状态，

服务端返回的html模板页面的过程当中会直接把里面的初始化数据脱出来变成水，然后在页面进入到客户端渲染的时候再注水，也就是拿到服务端在浏览器端注入的水去给页面（如果拿不到注的水，其实页面也有但初始化内容不对，同时会报错），这样保证客户端页面会与服务器端达到同步的效果。

6、目录结构

目录结构.png

node_modules 项目依赖
pages 模板页面
public 图片等静态资源
next-env.d.ts 确保TypeScript编译器选择Next.js类型，可以放到.gitignore 中，不需要变更
next.config.js 基于打包的框架包了一层配置文件。nextjs的配置,我们可以补充webpack的一些配置进行，比如补充别名

7、数据注入

这是与react最不同的部分

数据注入有四种方式：

getServerSideProps、getStaticProps、getInitialProps、客户端注入

Next.js提供的是前三种数据注入方式

最后一种方式客户端注入，即useEffect的钩子，通常不会这样写

8、getInitialProps

在服务器端执行，只能在页面层面进行绑定，采用同构，首次渲染服务器端渲染，路由跳转使用客户端路由。意味着如果使用router跳转当前页，会在客户端执行这部分逻辑。

getInitialProps最大的不同：

内部跳转（路由跳转）会走进方法（客户端走数据注入的方法）。直接访问页面（新打开一个页面）会从服务器端走。从而保证SEO优化请求时候可以拿到所有的数据。

9、getServerSideProps

SSR，与getlnitialProps不同的是即使使用router跳转当前页，也只会在服务端执行这部分逻辑

getServerProps效果和getInitialProps很相似

最大的不同在于，getInitialProps永远会在服务器端走

代码写法上，（在return中）拿props包了一层

建议同学使用getServerProps，按照平时node模式开发就可以，通常不会出大问题。因为getInitialProps需要对两端的环境兜底，难度较高。

10、getStaticProps

就是SSG，在服务器端构建时执行

把页面当中可能的所有情况都列存到CDN里面之后再去访问，访问的就是固定的静态页面

如果涉及动态路由(带参数,)需要使用getStaticPaths配置所有可能的参数情况。

11、Next.js直接支持css的module

常见的class类名基础上加入哈希值

通常使用类名会出现重复情况，保证类名不会出现重复的情况，也就不会出现样式互串问题。

12、文件式路由

Next.js有一个基于页面概念的基于文件系统的路由器。当一个文件被添加到pages目录中时，它会自动作为一个路径可用

配置路由：页面中有哪些（交叉或嵌套）的路由，用文件方式配置

用react router生成出来

router 是在项目文件目录下并没有单独的一个目录，而是根据文件目录自动生成路由。不像CSR需要自己写路由文件

路由分为三种：

index 生成一个杠/
id 生成一个/id
id数组列表（...id） /a/b/c

预定义的路由优先级更高，预定义路由能直接匹配的路由就不会分发给动态路由。

13、BFF层的文件式路由

BFF,作为服务器构建包，不影响客户端构建bundle体积。相同的router生成方式，不过是作为API层访问，而不是page。 BFF不生产数据，只是数据的搬运工。根据自己想要的数据的样子拼凑完后，扔给模板页面。 BFF是在服务器端走的，作为服务器构建包，不影响客户端构建bundle体积。router方式相同。

14、跳转方式

①通过 Next、Link进行路由跳转

②直接通过useRouter钩子进行路由跳转router.push

③原生跳转window.open，window.location但是没有走内部路由，不会做Diff比对渲染

**路由跳转方式（前两种）**性能上来说路由跳转更好

15、header与TDK

title、description、keywords
C端开发中最重要的三个点
header，通常需要定制TDK
有一个包helmet可以修改header。Next.js也有一个暴露的组件可以通过这个方式修改：
import Head from 'next/head'; 导入之后就可以正常写html的head了

16、webp

webp数据格式，facebook公司提供的
图片会缩小很多，慢网情况下加载速度更快，慢网情况下只需要请求一部分大小资源就可以开始解析了。但是需要更长的解析时间，因此有时候快网的情况下加载时间可能更长。
webp格式并不是所有浏览器都兼容。

怎样判断是否兼容webp格式？

通常查看页面的network的header中有imag/webp表示支持webp资源

如果不兼容webp格式，怎么办？

需要png格式作为兜底，不然页面就会加载不出来。

17、BFF和express不同点

没有中间件的写法，不区分get，也不区分post方法。如果需要限制请求类型就需要加一些判断req.method=='GET'或'POST'

18、Next.js调试方式

①JavaScript Debug Terminal控制台（服务器端的控制台，服务器端代码的断点可以生效）

②Next.js提供的debug命令，npm run debugger，然后点左上角绿色的图标，基于Node.js调试服务器端代码

初识Next.js ｜ 青训营笔记