这是我参与[第五届青训营]伴学笔记创作活动的第10天，继续和大家分享自己学习《Next.js实战项目》章节课程的收获。
一、本堂课重点内容
- Next.js客户端开发
二、详细知识点介绍
1.Next.js客户端开发实践练习
（1）Nextjs初始化
确保Typescript编译器选择Nextjs类型，可以放到.gitignore中，不需要变更。
nextjs的配置，可以补充webpack的一些配置进行。
（2）数据注入
- getInitialProps:在服务端执行，只能在页面层面进行绑定，采用同构，首次渲染服务器端渲染，路由跳转使用客户端路由。意味着如果使用router跳转当前页，会在客户端执行这部分逻辑。
- getServerSideProps:SSR,与getInitialProps不同的是即使使用router跳转当前页，也只会在服务端执行这部分逻辑。
- getStaticProps:SSG,在服务器端构建时执行，如果涉及动态路由（带参数），需要使用getStaticPaths配置所有可能的参数情况
（3）CSS Modules
Nextjs支持使用文件命名约定的CSS模块。
（4）layout
通过在入口文件导入layout,可以实现每个页面公共的页眉页尾。
（5）文件式路由
- 预定义路由优先级更高，预定义路由能直接匹配的路由就不会分发给下面的动态路由。
- nextjs有一个基于页面概念的基于文件系统的路由器，当一个文件被添加到pages目录中时，它会自动作为一个路径可用。
- BFF层的文件式路由：作为一个服务器构建包，不影响客户端构建bundle体积，相同的router生成方式。不过是作为API层访问，而不是page。
- 路由跳转：性能上nextjs提供的路由跳转比原生方法跳转的性能更好。
（6）header的修改
可用于修改TDK（title,description,keywords）
