Next.js实战项目 | 青训营笔记

92 阅读1分钟

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

什么是Next.js?

SSR的实现

image.png

基于React提供的相关服务器渲染API实现,整个过程实现比较繁琐重复,从零实现对新上手的同学很不友好,迫切需要一个封装好的集合来快速上手服务器端渲染。

SSR的实现-Demo仓库

image.png

Next.js

image.png

初始化

image.png

Next.js 客户端开发

demo仓库地址

image.png

Next.js初始化

image.png

数据注入

image.png

getInitialProps

image.png

getServerSideProps

image.png

getStaticPaths

image.png

CSS Modules

Next.js支持使用文件命名约定的CSS模块

image.png

Layout

image.png

文件式路由

image.png

BFF层的文件式路由

image.png

路由跳转

image.png

除了这些外,还可以使用原生方法跳转,不过原生的方法不会进行Diff比对渲染,性能上Next.js提供的路由跳转会更好。

header的修改

image.png

可用于修改TDK(title,description,keywords)