Next.js客户端开发|青训营笔记

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

今天是学习NEXT.js的第二天，虽然讲的东西很多没有听懂，需要找很多相关的文档进行了解。 以下是根据课程PPT记的笔记

为什么要同构：

Next.js初始化配置文件的了解

• node_modules:放的状态依赖
• pages：放的一些模板页面
• public:图片等静态资源
• next-env.d.ts:确保TypeScript编译器选择Next.js类型，可以放到.gitignore中，不需要变更。
• next.config.js:next.js的配置，我们可以补充webpack的一些配置进行。

数据注入：

• getSeverSideProps:SSR,与getInitialProps不同的是，即使使用router跳转当前页，也只会在服务端执行这部分逻辑
• getInitialProps:在服务端执行，只能在页面层进行绑定，采用同构，首次渲染服务端渲染，路由跳转使用客户端路由，意味着如果使用router跳转当前页，会在客户端执行这部分逻辑
• getStaticProps:SSG,在服务器构建是执行，如果涉及动态路由（带参数），需要使用getStaticPathS配置所有可能的参数情况
• CSS Modules：Next.js支持使用文件命名约定的CSS模块。

文件式路由：

当一个文件被添加到pages目录中时，它会自动作为一个路径可用，预定义路由优先级更高，预定义路由能直接匹配的路由就不会分发给下面的动态路由

BFF层文件式路由

BFF，作为服务器构建包，不影响客户端构建bundle体积。相同的router 生成方式，不过是作为 API 层访问，而不是page。

多媒体适配

• CSS适配
• JS适配

一个接口的生成有以下几个过程：

1. content-type builder 编辑结构体
2. content manager 配置数据源并且发布
3. settings roles里选择对应角色并勾选要发布的接口类型
4. 如果设计嵌套，在接口上加上 populate = deep 参数（npm install strapi-plugin-populate-deep --save），没安装加参数 populate=*，但只能嵌套一层

首页功能实现

页面 & 动画 & 多媒体适配

1. BFF
2. Strapi
3. 多媒体格式的转换

主体化功能实现

1. 基础样式和背景的抽离
2. 主题化 context 全局注入
3. 从注入数据中取出 theme 和setTheme
4. 多进程间的主题同步