Nextjs了解内容

news2025/10/31 7:56:05

目录

  • Next.js
    • next.js的实现
      • 1，nextjs初始化
      • 2， 项目结构
      • 3， 数据注入
        • getInitialProps
        • getServerSideProps
        • getStaticProps
        • 客户端注入
      • 3，CSS Modules
      • 4，layout组件
      • 5，文件式路由
      • 6，BFF层的文件式路由
      • 7，路由跳转
      • 8，header的修改
      • 9， 移动端适配---css适配
      • 10， 移动端适配--js
      • 11，大图优化 ---webp
    • Nextjs服务端开发
      • 1，BFF层开发

Next.js

学习之前应该了解的知识： 页面的几种渲染方式指路网址

对于SSR的实现，如下图所示，是一个比较复杂和繁琐的事情。
那nextjs就是作为一个基于react的框架，来进行更好的服务端渲染的。
在这里插入图片描述

next.js的实现

是一个前后端一体化的一个框架。
在这里插入图片描述

1，nextjs初始化

创建nextjs项目命令：

npx create-next-app@latest --typescript

2， 项目结构

在这里插入图片描述
其中：
pages中放置的是模板页面
public： 放置的静态资源
next-env.d.ts: 确保typescript 编译器选择Net.js类型，可以放置到.gitignore中，不需要变更
next.config.js: 就是nextjs 的配置，我们可以补充webpack的一些配置进行。比如是补充一些别名。

3， 数据注入

和客户端开发最不同的地方，就是数据注入的部分。
比如我们在csr模式中，可以在一个生命周期钩子里面，向后端获取数据，将得到的数据放到一个声明的state里面，这样我们就可以使用这个数据。
在这里插入图片描述
但是在ssr模式里面，尽量不使用在生命周期钩子里面去获取数据，而是会有单独的数据注入的一个方式。
下面就是next提供的三个数据注入的方式：
在这里插入图片描述

getInitialProps

在服务器端执行，只能在页面层面进行绑定，采用的同构ssr渲染，说明一套代码要在服务端运行一次，又要在客户端运行一次，首次渲染是服务器端渲染，路由跳转时是使用的客户端路由，
该方法在路由跳转使用客户端路由，意味着如果使用router跳转当前页，会在客户端执行这部分逻辑。

在刷新页面的时候，会走服务器端的代码，来保证seo
在进行内部路由跳转的时候，会走客户端的代码。

比如下面的代码，当直接刷新页面，是不会进行degugger的，但是当跳转路由的时候，就会进行debugger。

在这里插入图片描述
不好的地方是，因为node引擎和v8引擎是在变量和方法中 是不相同的，同一套代码在node引擎中和v8引擎中都要走一遍的话，就会在编写代码时比较麻烦，要进行代码兜底。

getServerSideProps

与getInitialProps不同的是，即使使用router跳转当前页，也只会在服务端执行这部分逻辑，这就弥补了getInitialProps的缺点。
这个和getInitialProps 不同的地方就是，在返回数据的时候，需要使用props字段，将数据进行包裹起来。
在这里插入图片描述

getStaticProps

这个就是使用的SSG，在服务端构建时执行的， ssg就是一个静态页面， 当访问的时候，就直接将一个页面返回。

SSG，是在服务器端构建时执行的
如果涉及到动态路由(带参数)， 需要使用getStaticPaths配置所有可能的参数情况。

客户端注入

就是上面内容写的，使用生命周期钩子， 在钩子方法中，去获取数据。

3，CSS Modules

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

写法： [name].module.css
使用方式： 使用上面的写法来为css文件进行命名，然后再js文件中直接import进行普通引用即可。

在打包后的html里面，都会为class加上一个哈希值，为了避免类名重复。
在这里插入图片描述

4，layout组件

通过在入口文件导入layout，可以实现每个页面公共的页眉页尾。
在这里插入图片描述
页面的页眉页尾：
在这里插入图片描述

5，文件式路由

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

  • api文件就是作为数据的中间层，用来重组数据的。
  • article就是一个路由文件，是以/article路径存在的。其中在这个文件夹下面，有一个[articleId].tsx，articleId就是作为一个参数
    在这里插入图片描述
    文件式路由的格式：
./pages/demo/index.tsx 对应的路由格式： /demo
./pages/demo/[id].tsx 对应的路由格式： /demo/:id
./pages/demo/[a,b,c].tsx 对应的路由格式: /demo/a/b/c

上面的路由是有优先级的
当文件中，以上三种文件都存在，则第一种文件会先优先
第一种路由其实就是预定义路由。优先级就会更高。

6，BFF层的文件式路由

在这里插入图片描述
BFF，作为服务器构建包，不影响客户端构建bundle体积，相同的router生成方式，不过是作为API层访问，而不是page

7，路由跳转

nextjs路由跳转使用方式1：

import Link from "next/link";

<Link href={item.link} key={index}>
              <div className={styles.card}>
                <h2>{item.label} &rarr;</h2>
                <p>{item.info}</p>
              </div>
            </Link>

路由跳转使用方式2：
使用useRouter钩子进行跳转
在这里插入图片描述

其他方式：
除了这些之外，还可以使用远程方法进行跳转，不过远程的方法不会进行DIff比对渲染，性能上Nextjs提供的路由跳转会更好。

8，header的修改

对于seo来说，一个页面的header是非常重要的，
nextjs就暴露出来这样一个组件Head，进行对header的内容进行修改。就修改的内容，放在Head组件里面即可
在这里插入图片描述

9， 移动端适配—css适配

一般是使用rem来进行适配。rem是根据当前的页面的font-size来决定1rem的大小。

// 极小分辨率移动端设备
@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来判断情况。

如下： 当进行移动端适配的时候，需要将css文件导入进来，
使用@include关键字来进行判断
当时手机端的时候，就可以对页面进行一些调整。
当时ipad端的时候，对应的进行页面调整。
在这里插入图片描述

10， 移动端适配–js

当PC端和移动端项目的同一个功能，由于适配的问题，导致组件的更换。
那使用css适配方式，已经无法去满足。
只能是使用js方式，来进行适配。
适配的方式： 就是在store中保存一个变量 用来记录 当前屏幕的宽度 或者是屏幕环境（是移动端还是pc）等，

  1. 监听屏幕宽度变化，使用resize方方法，
  2. 当屏幕发生变化的时候，获取屏幕的宽度，
  3. 用宽度去判断，不同的宽度有不同的样式
  4. 添加none类型来缓冲默认类型样式切换时候的视觉冲突。
    在这里插入图片描述

11，大图优化 —webp

webP其实就是一个图片格式，类似于png等。
对于大图片来说，当用户的网络特别卡的时候，就会导致图片加载不出来，为了缓解这种情况，那么就提供了webp的这种图片格式。webp的图片格式的大小是非常小的，可以更好的加载出来。但是有趣的是，当快网的时候，webp的解析时间是大于png的解析时间。
这个需要注意兼容性的问题。可以通过方法来进行判断该浏览器是否兼容webP格式

export const getIsSupportWebp = (context: AppContext) => {
  const { headers = {} } = context.ctx.req || {};
  return headers.accept?.includes("image/webp");
};

对于目前转换成webp格式，都有软件或者网页可转，可以自行百度。

Nextjs服务端开发

1，BFF层开发

其实是和express等开发类似，区别是并没有参数可以区别请求类型。
在BFF层请求数据的时候，不去规定其post方法和get方法
位置主要是写在pages下面的api里面。
在这里插入图片描述
BFF，作为服务器构建包，不影响客户端构建bundle体积，相同的router生成方式，不过是作为API层访问，而不是pages

 axios
    .get(`${CMSDOMAIN}/api/article-introductions`, {
      params: {
        pageNo,
        pageSize,
      },
    })

由于BFF层是在服务器端跑的，你在代码中dugger是不起作用的，下面有两种方式进行调试：
一个是JS的Debug 终端：
在这里插入图片描述
直接在调试终端 ，去跑代码即可。在浏览器是不起作用的，而是在vscode中可见。
在这里插入图片描述
第二个是： 直接在node终端中运行下面这个命令即可。

npm run debugger

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/337644.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

爬虫笔记之——selenium安装与使用（1）

爬虫笔记之——selenium安装与使用（1）

爬虫笔记之——selenium安装与使用&#xff08;1&#xff09;一、安装环境1、下载Chrome浏览器驱动&#xff08;1&#xff09;查看Chrome版本&#xff08;2&#xff09;下载相匹配的Chrome驱动程序地址&#xff1a;https://chromedriver.storage.googleapis.com/index.html2、学…
阅读更多...
vue83-103

vue83-103

vue全局路由拦截路由懒加载路由原理swiper组件选项卡封装电影导航组件正在热映获取数据渲染axios封装详情渲染详情轮播详情Header-组件影院组件渲染全局路由拦截 即使路径对&#xff0c;也会被拦截 router.beforeEach((to,from, next) > { console.log(to) if&#xff08;…
阅读更多...
雅思经验（9）

雅思经验（9）

写作&#xff1a;关于趋势的上升和下降在小作文中&#xff0c;真的是非常常见的&#xff0c;所以还是要积累一下。下面给出了很多词&#xff0c;但是在雅思写作中并不是词越丰富&#xff0c;分数就越高的。雅思写作强调的是准确性&#xff1a;在合适的地方用合适的词和句法。不…
阅读更多...
【数据库】 数据库中表的基本操作

【数据库】 数据库中表的基本操作

目录 表的基本操作 一&#xff0c; 创建表 1&#xff0c;单行命令创建表&#xff1a; 2&#xff0c;分行命令创建表&#xff1a; 二&#xff0c; 数据类型 1&#xff0c;文本类型&#xff1a; 2&#xff0c;数值类型&#xff1a; 3&#xff0c;日期/时间类型&#xff1a…
阅读更多...
软件测试金融测试岗位，本人亲面

软件测试金融测试岗位，本人亲面

网上银行转账是怎么测的&#xff0c;设计一下测试用例。 回答思路&#xff1a; 宏观上可以从质量模型&#xff08;万能公式&#xff09;来考虑&#xff0c;重点需要测试转账的功能、性能与安全性。设计测试用例可以使用场景法为主&#xff0c;先列出转账的基本流和备选流。然…
阅读更多...
一个图片对比的小工具【小工具制作】

一个图片对比的小工具【小工具制作】

目录逐一击破确定架构图片上传自适应生成对比界面切换对比模式打分功能审核进行提交项目负责人查看问题并改正总结前言&#xff1a;这是一个实际的需求&#xff0c;因为需要设计师给的原图和同学们制作出来的项目成品图进行比对打分&#xff0c;所以就有了一个图片对比的小工具…
阅读更多...
用 Python 调用 GPT-3 API

用 Python 调用 GPT-3 API

用 Python 调用 GPT-3 API GPT-3 是去年由 Open AI 推出的语言机器学习模型。它因其能够写作、写歌、写诗&#xff0c;甚至写代码而获得了广泛的媒体关注&#xff01;该工具免费使用&#xff0c;只需要注册一个电子邮件即可。 GPT-3 是一种叫 transformer 的机器学习模型。具体…
阅读更多...
C语言（输入printf()函数）

C语言（输入printf()函数）

printf()的细节操作很多&#xff0c;对于现阶段的朋友来说&#xff0c;主要还是以理解为主。因为很多的确很难用到。 目录 一.转换说明&#xff08;占位符&#xff09; 二.printf()转换说明修饰符 1.数字 2.%数字1.数字2 3.整型转换字符补充 4.标记 -符号 符号 空格符…
阅读更多...
JavaWEB必知必会-Servlet

JavaWEB必知必会-Servlet

目录 Servlet简介Servlet快速入门Servlet配置详解ServletContext 1 Servlet简介 Servlet 运行在服务端的Java小程序&#xff0c;是sun公司提供一套规范&#xff08;接口&#xff09;&#xff0c;用来处理客户端请求、响应给浏览器的动态资源。但servlet的实质就是java代码&a…
阅读更多...
电脑里的连接速度双工模式是什么？怎么设置

电脑里的连接速度双工模式是什么？怎么设置

双工模式包括全双工、半双工模式。1.半双工1、半双工数据传输允许数据在两个方向上传输&#xff0c;但是&#xff0c;在某一时刻&#xff0c;只允许数据在一个方向上传输&#xff0c;它实际上是一种切换方向的单工通信。所谓半双工就是指一个时间段内只有一个动作发生。早期的对…
阅读更多...
十二、Linux文件 - fseek函数讲解

十二、Linux文件 - fseek函数讲解

目录 一、fseek函数讲解 二、fseek函数实战 一、fseek函数讲解 重定向文件内部的指针 注&#xff1a;光标 ---- 文件内部的指针 函数原型&#xff1a; int fseek(FILE *stream,long offset,int framewhere) 参数&#xff1a; stream&#xff1a;文件指针offset&#xff1a;…
阅读更多...
golang由浅入深

golang由浅入深

简介 Go语言&#xff08;Golang&#xff09;是由Google公司的Robert Griesemer、Rob Pike、Ken Thompson三位工程师开发的一种静态强类型、编译型、并发型、快速运行的编程语言。 Go语言诞生于2007年&#xff0c;旨在创造一种具有现代特性的编程语言&#xff0c;可以替代C和Jav…
阅读更多...
DS期末复习卷（二）

DS期末复习卷（二）

选择题 1&#xff0e;下面关于线性表的叙述错误的是&#xff08; D &#xff09;。 (A) 线性表采用顺序存储必须占用一片连续的存储空间 (B) 线性表采用链式存储不必占用一片连续的存储空间 © 线性表采用链式存储便于插入和删除操作的实现 (D) 线性表采用顺序存储便于插…
阅读更多...
2023春招100道软件测试高频面试题

2023春招100道软件测试高频面试题

给大家整理了2023春招的100道软件测试高频面试题&#xff0c;篇幅较长&#xff0c;所以只放出了题目&#xff0c;答案在文末&#xff0c;自行获取哦&#xff01; 1.项目测试流程你是怎么开展的&#xff1f; 2.接口测试用例的编写要点有哪些&#xff1f; 3.APP测试和Web测试有…
阅读更多...
ubuntu20.04安装docker与docker-compose

ubuntu20.04安装docker与docker-compose

安装docker 查看系统发行版本 cat /proc/version1、更新apt包 sudo apt-get update2、安装必备的软件包以允许apt通过 HTTPS 使用存储库&#xff08;repository&#xff09;&#xff1a; sudo apt-get install ca-certificates curl gnupg lsb-release3、添加Docker官方版本…
阅读更多...
C语言学习笔记(一)：了解C语言

C语言学习笔记(一)：了解C语言

什么是C语言 C语言是一种高级编程语言&#xff0c;最早由丹尼斯里奇在1972年开发。它是一种通用编程语言&#xff0c;提供了高级编程语言的方便和易用性&#xff0c;同时又有较低级别的编程语言的灵活性和效率。C语言在许多操作系统、编译器和应用程序开发中广泛使用&#xff…
阅读更多...
使用Naticat同步数据库结构

使用Naticat同步数据库结构

现象&#xff1a; 开发环境对数据库结构进行了修改&#xff0c;如何同步到测试环境 例: 开发环境&#xff08;dev&#xff09;&#xff1a;my_test_data 测试环境&#xff08;test&#xff09;&#xff1a;my_test_data_1 方法&#xff1a; 使用Naticat同步两个数据库结构 选中…
阅读更多...
PLC是什么？PLC相关知识小科普

PLC是什么？PLC相关知识小科普

欢迎各位来到东用知识小课堂1.PLC是什么&#xff1a;●PLC就是可编程控制器&#xff0c;它应用于工业环境&#xff0c;必须具有很强的抗干扰能力、广泛的适应能力和应用范围。●PLC是“数字运算操作的电子系统”&#xff0c;也是一种计算机&#xff0c;它是“专为在工业环境下应…
阅读更多...
EdgeX Foundry （一）安装和部署

EdgeX Foundry （一）安装和部署

系统版本uname -rdocker 版本docker --versiondocker-compose版本安装参考链接&#xff1a;https://blog.csdn.net/chezong/article/details/128917107拉取edgex foundry 配置文件 docker-compose.yml; curl https://raw.githubusercontent.com/edgexfoundry/edgex-compose/ire…
阅读更多...
【C语言学习笔记】：通讯录管理系统

【C语言学习笔记】：通讯录管理系统

系统中需要实现的功能如下&#xff1a; ✿ 添加联系人&#xff1a;向通讯录中添加新人&#xff0c;信息包括&#xff08;姓名、性别、年龄、联系电话、家庭住址&#xff09;最多记录1000人 ✿ 显示联系人&#xff1a;显示通讯录中所有的联系人信息 ✿ 删除联系人&#xff1a;按…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023