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

王水
105 阅读1分钟

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

8. Next.js 实战项目

8.1 课程目标

具备C端Web应用开发的基本能力

8.2 CSR, SSR, SSG

CSR

image.png

SSR

image.png

同构SSR

image.png

SSG

image.png

SSR,SSG的优势-利于SEO

image.png

浏览器的推广程度，取决于搜索引擎对站点检索的排名，搜索引擎可以理解为一种爬虫，它会爬取指定页面的HTML，并根据用户输入的关键词对页面内容进行排序检索，最后形成我们看到的效果。

SSR,SSG的优势-更短的首屏时间

image.png

8.3 什么是Next.js？

SSR的实现

image.png

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

SSR的实现-Demo仓库

image.png

Next.js

image.png

初始化

image.png

8.4 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)

多媒体适配-css适配

image.png

多媒体适配-js适配

image.png

大图优化-Webp

image.png

8.5 Next.js 服务端开发

BFF层开发

image.png

和Express等开发类似，区别是并没有参数可以直接区别请求类型

调试方式

image.png

Strapi-headless CMS

image.png

8.6 核心功能讲解

首页功能实现

  1. 页面 & 动画 & 多媒体适配
  2. BFF
  3. Strapi

文章页实现

image.png

主题化功能实现

image.png

avatar
文章
阅读
粉丝