[ Next.js相关知识点 | 青训营笔记]这是我参与「第五届青训营」伴学笔记创作活动的第 14 天重点内容: C

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

一、本堂课重点内容：

CSS Modules
Layout
文件式路由
BFF层的文件式路由
路由跳转
多媒体适配----CSS适配
多媒体适配----JS适配
大图优化 - webp

二、详细知识点介绍：

CSS Modules

Next.js支持使用文件命名约定的CSS模块。[name].module.css
Layout

通过在入口文件导入layout，可以实现每个页面公共的页眉页尾。
文件式路由

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

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

预定义路由：

// ./pages/demo/index.tsx => /demo

动态路由：

// ./pages/demo/[id].tsx => /demo/:id

// ./pages/demo/[...id].tsx => /demo/a/b/c => id = ["a", "b", "c"]
BFF层的文件式路由

BFF（pages下的api文件夹内容），作为服务器构建包，不影响客户端构建bundle体积，相同的router生成方式，不过是作为API层访问，而不是page。

BFF就是获取数据，将数据拼装成需要的样子之后，进行传递。
路由跳转

跳转方式有next/link跳转和useRouter跳转，除此之外还可以使用原生方式window.open等跳转，不过原生方式没有走内部跳转，不会进行Diff比对渲染，性能上Nextjs提供的路由跳转会更好。

next/link跳转：
```
import Link from "next/link";

<Link href={item.link} key={index}>
    <h2>{item.label}</h2>
</Link>
```
useRouter跳转：
```
import {userRouter} from "next/router";

const router = useRouter()
router.push(href)
```

header的修改：

可用于修改TDK（title，desctiption，keywords）

import Head from "next/head";

<Head>
     <title>{`A Demo for 《SSR 实战：官网开发指南》(${isMobile ? '移动端' : 'pc端'})`}</title>
    <meta name="description" content={`A Demo for 《SSR 实战：官网开发指南》(${isMobile ? '移动端' : 'pc端'})`} />
    <meta name="viewport" content="user-scalable=no" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1" />
    <link rel="icon" href="/favicon.ico" />
</Head>

多媒体适配----CSS适配

改变font-size等属性，使页面适配不同设备。

pages\article\styles.module.scss：

// 极小分辨率移动端设备
@mixin media-mini-mobile {
  @media screen and (max-width: 25.875rem) {
    @content;
  }
}

// 介于极小分辨率和正常分辨率之间的移动端设备
@mixin media-between-mini-and-normal-mobile {
  @media screen and (min-width: 25.876rem) and (max-width: 47.9375rem) {
    @content;
  }
}

// 移动端设备
@mixin media-mobile {
  @media screen and (max-width: 47.9375rem) {
    @content;
  }
}

// ipad
@mixin media-ipad {
  @media screen and (min-width: 47.9375rem) and (max-width: 75rem) {
    @content;
  }
}

除此之外还在其他文件中用@include设置了其他的适配样式。

多媒体适配----JS适配

不只是样式设置，甚至组件及其交互方式都存在不同。

用useContext()把自己写的注入器放入之后，就可以得到注入器返回的内容。这样就可以在任何需要用到设备信息的地方很快速的获取到。
大图优化 - webp

对于慢网速用户来说，打开网站时，图片加载时间较长。

Facebook提供了一个webp的图片格式，搜索png to webp，在convertio.co/zh/png-webp… 网站中，就可以将png格式的图片转化为webp格式，图片体积将会大大减小。convertio也可以转换各种格式的文件。

这样，慢网速情况下，加载时间就会减少。但是快网速情况下，webp的加载时间可能比png要长，因为解析时间会变长。

也就是说，快网速情况下，图片拉取时间并不长，webp解析时间反而较长，所以png格式加载速度更快；而慢网速情况下，图片拉取时长远大于webp解析时长，因此用webp格式更快。

webp并非所有设备都兼容，如果有webp，打开它的headers，看到accept里面有image/webp，就说明当前浏览器支持webp。如果不支持就使用png格式。

三、课后个人总结：

了解了许多相关知识点，如CSS和JS的多媒体适配、路由跳转原生跳转方式的区别、webp格式与png格式在不同网速下的加载速度等。