(HP)next.js入门

news2024/11/18 11:30:40

推荐文档:生成<head> - 《next.js v7.0 中文文档》 - 书栈网 · BookStack

1,解决的问题

SPA单页面应用的两个问题:首屏加载过慢,不能SEO(搜索引擎抓取)

2,它是一个react服务端渲染框架

3,做的事

帮助我们配置webpack,路由

自带数据同步(后端数据和前端)

很多插件(生态)

灵活的配置

4,搭建方式:create-next-app脚手架或者手动

5,手动搭建next.js

npm  init

npm  install react react-dom  next

配置package.json

Dev. Next

Build next build

Start next start

pages页面next自动将该文件夹中进行路由配置

6,使用creat-next-app脚手架

Sudo nom install -g create-next-app

npx  create-next-app  项目名称

虎扑初始化一个next.js项目:

yarn create next-app --typescript

7,页面访问路径自动加载

next.js的pages中的js,jsx默认export defualt就是导出一个组件

也可以通过中pages中新建其他文件夹比如component,在其中添加about.js

则访问localhost:3000/component/about即可,

但是pages中的api文件夹是特殊的,里面的文件不可以这样去访问。

8,pages下的各个js文件的路由link默认已经配置了,即:以前react-router-dom需要在App标签外包一层browserRouter,现在不需要了。

如果pages页面下某js文件路由到pages页面下另一个js文件,不需要引入该js文件,路由名称直接写该文件名即可。因为pages文件夹下的js文件自动处理成路由,所以该文件夹应该放路由页面,不要放其他组件。

所以如果pages下的某个js文件加载了一个外部(pages外)组件,这个组件具有路由跳转,这个时候该组件需要引入目标页面的js文件吗?

9linka

pages下的路由跳转, 如果直接使用以下方式跳转,仍然会把所有页面一次性加载

<a.  href=‘/second’>跳到第二个页面</a>

如果使用Link标签则加载到该页面才进行加载

<Link href=‘/second’>

     <a>跳到第二个页面</a>

</Link>

注意:导入Link不需要加{}:

Import. Link from ‘next/link’;

10,link标签下只能有一个标签(不允许有兄弟标签)

11,动态路由

这样的一个路径http://192.168.0.100:3000/basketball/v2/nba/team/entry/1901000000501267
对应文件夹中的结构:pages/[leagutype]/team/entry/[tid].js

在该路径下的文件[tid].js能够通过context.query获取真实url中对应的tid(1901000000501267)以及leagutype(basketball/v2/nba)

如果url中包含参数?tid=10&b=100,通过context.query依然获取tid(1901000000501267),b(100)而不是tid(10)
{tid,  b} = context.query

12,nextjsssr

Next.js 的三种渲染方式(BSR、SSG、SSR) - 知乎

ssr和csr的区别:

13getServerSideProps(或getStaticProps

假如某个页面每个用户看到的数据都一样(因为和用户没关系,比如球队页),就可以用ssr,直接后端把这个页面渲染好传给前端,但是这个过程不需要前端发起请求,就直接用getServerSideProps这个管道函数就行,其返回值将会作为本页面props传入。

14getInitialProps

页面初次加载的时候,该函数只会在服务端执行一次。只有路由link切换,或者组件跳转的时候,才会在客户端执行该函数。

它只能用在pages页面,不可用在子组件。

15getStaticPaths

获取静态路由(必须和getStaticPtops配合)

16getStaticProps

15,服务端渲染优化seo

加载getServerSideProps传过来的数据,因为先获得props,然后渲染dom,然后执行componentDidmount里面的东西。所以如果props中的数据一开始没有使用,而是在componentDidmount中处理过后再加载dom,就不会出现在body中,那么seo就失败了。

所以从props传递过来的数据最好是已经处理好的直接在componentDidmount之前渲染到dom中,就会出现在body中

右键选择网页源代码,选择自动换行,查看从服务端传递过来的数据是否进入body中。

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

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

相关文章

ArcGIS去除黑边方法汇总

概述 在使用ArcGIS对影像进行应用的时候&#xff0c;如果出现了黑边&#xff0c;除了影响美观之外&#xff0c;进行镶嵌处理也可能会有问题&#xff0c;这里&#xff0c;我们介绍一下几种ArcGIS去除黑边的方法&#xff0c;希望能够对大家有所帮助。 数据来源 教程所使用的实…

【C++进阶】类型转换

&#x1f387;C学习历程&#xff1a;入门 博客主页&#xff1a;一起去看日落吗持续分享博主的C学习历程博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a; 也许你现在做的事情&#xff0c;暂时看不到成果&#xff0c;但不要忘记&…

蓝桥杯Python练习题8-查找整数

资源限制   内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述   给出一个包含n个整数的数列&#xff0c;问整数a在数列中的第一次出现是第几个。 输入格式   第一行包含一个整数n。  …

欢迎谷歌回归中国,但有前提!李彦宏也发了条朋友圈

2018年&#xff0c;Google部分功能成功回归中国大陆 周一&#xff0c;人民日报在海外社交媒体平台Twitter和Facebook上刊文&#xff0c;针对谷歌计划以过滤版搜索引擎重返中国大陆的消息回应称&#xff0c;欢迎谷歌重返中国大陆&#xff0c;但前提是必须遵守中国法律。李彦宏在…

云计算IaaS、PaaS(iPaaS/aPaaS)以及SaaS以及发展趋势

一、云计算IaaS、PaaS以及SaaS架构 云计算涉及了很多产品与技术&#xff0c;表面上看起来的确有点纷繁复杂&#xff0c;但是云计算本身还是有迹可循和有理可依的&#xff0c;下面介绍一套云计算的架构&#xff0c;具体请看图&#xff1a; 上面这个云架构共分为服务和管理这两…

车载入侵检测与防御系统介绍

作者 | 田铮 上海控安可信软件创新研究院项目经理 来源 | 鉴源实验室 引言&#xff1a;上一篇文章&#xff08;智能网联汽车网络安全攻击与防御技术概述&#xff09;介绍了智能网联汽车中的网络安全攻击案例和具体攻击类型。而本篇文章中&#xff0c;我们将对汽车网络安全风险…

SpringSecurity——OAuth2框架鉴权实现源码分析

SpringSecurity——OAuth2框架鉴权实现源码分析一、ManagedFilter迭代过滤器链1.4 springSecurityFilterChain1.4.7 OAuth2AuthenticationProcessingFilter①.OAuth2AuthenticationProcessingFilter.class②.CookieTokenExtractor.class&#xff08;我们自己重写的方法&#xf…

瞄准智慧园区 东方恩拓与用友协同开拓新商机

在数字化转型升级浪潮中&#xff0c;传统园区也在寻求新的发展方向&#xff0c;从传统园区向智慧园区甚至未来园区不断演进。随着国家“数字中国”、“中国智造”、“新基建”等战略的部署&#xff0c;智慧园区也迎来了新的发展机遇&#xff0c;园区的数字化、网络化、智能化是…

户外运动耳机选择哪个、最适合户外运动的蓝牙耳机推荐

还有哪个季节比秋天更适合爬山和徒步等户外运动的吗&#xff1f;秋天—没有夏日的骄阳&#xff0c;没有冬天的万物凋零&#xff0c;放眼望去都是墨绿和金黄&#xff0c;上山的话还可以采摘成熟的各种各样的果子…但是一个人的话难免有些落寞&#xff0c;要是有音乐的陪伴则会增…

公网远程连接windows SQL Server数据库【内网穿透】

文章目录1. 本地安装配置SQL Server2. 将本地sqlserver服务暴露至公网2.1 本地安装cpolar内网穿透2.2 创建隧道3. 公网远程连接sqlserver3.1 使用命令行远程连接sqlserver3.2 使用navicat premium图形界面远程连接sqlserver3.3 使用SSMS图形界面远程连接sqlserver疫情当下,居家…

win7电脑怎么录屏?超级简单的2种电脑录屏方法

相信还有不少朋友的电脑系统是win7系统。其实&#xff0c;win7电脑和win10电脑一样都有自带录屏功能。那win7电脑怎么录屏&#xff1f;在win7电脑上开启运行窗口即可&#xff0c;当然也可以通过使用专业的录屏软件来录制屏幕。 下面就由小编给大家介绍一下2个win7电脑录屏的方…

P8 PyTorch WhereGather

前言 这两个函数优点是通过GPU 运算速度快 目录&#xff1a; 1 where 2 Gather 一 where 原理&#xff1a; torch.where(condition,x,y) 输入参数&#xff1a; condition: 判断条件 x,y: Tensor 返回值&#xff1a; 符合条件时: 取x, 不满足取y 优点&#xff1a; 可以使…

关注re:Invent中国巡展,尽享数字时代红利

编辑&#xff5c;阿冒收获固然很甜蜜&#xff0c;但是收获也很辛苦。肯定会有人感觉莫名其妙&#xff0c;既然是收获&#xff0c;必然是甜蜜的&#xff0c;哪来的辛苦啊&#xff1f;且不要着急&#xff0c;容我慢慢分说。一年一度的亚马逊云科技re:Invent全球大会&#xff0c;向…

【操作系统】磁盘调度算法

文章目录影响其访问的时间因素磁盘调度&#xff08;移臂调度&#xff09;常见的磁盘调度算法1、先来先服务算法&#xff08;FCFS&#xff09;2、最短寻道时间优先算法&#xff08;SSTF&#xff09;3、电梯调度算法&#xff08;扫描算法SCAN&#xff09;4、循环扫描算法&#xf…

Microsoft Office 2016 VOL版下载

链接都是VOL版&#xff0c;和零售版功能是一样的&#xff0c;只是激活方便一些&#xff0c;三个下载链接&#xff0c;第一个是Office就是包含了Word、Excel、PPT那些的&#xff0c;另外两个一个是Visio&#xff0c;一个是Project&#xff0c;如果不需要的话&#xff0c;只下载第…

【HTML5】复习(二)

HTML5复习二1.代码一2.代码二3.CSS的引入方式4.选择器5.form表单的一些属性6.内联7. 音频视频8. 滑块、搜索、数字、URL9. 表单补充1.代码一 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head>&…

声明式事务的属性之隔离级别

声明式事务的属性之隔离级别 ①介绍 数据库系统必须具有隔离并发运行各个事务的能力&#xff0c;使它们不会相互影响&#xff0c;避免各种并发问题。一个事务与其他事务隔离的程度称为隔离级别。SQL标准中规定了多种事务隔离级别&#xff0c;不同隔离级别对应不同的干扰程度&…

智能家居创意DIY之智能灯泡

一、什么是智能灯 传统的灯泡是通过手动打开和关闭开关来工作。有时&#xff0c;它们可以通过声控、触控、红外等方式进行控制&#xff0c;或者带有调光开关&#xff0c;让用户调暗或调亮灯光。 智能灯泡内置有芯片和通信模块&#xff0c;可与手机、家庭智能助手、或其他智能…

12.29日报

今天完成了数据库TestMrl的增删改查四个接口的开发&#xff0c;测试。 测试接口getQRcodeandscene 遇到的问题及解决 不知道在mapper中的增删改方法返回值int的值&#xff0c;和含义&#xff0c;在调用方法时也没有定义int来接参&#xff0c;都是直接调用。于是我定义int i&…

富丽宝石在港交所招股书再次“失效”,于海洋为控股股东

12月30日&#xff0c;贝多财经从港交所披露易了解到&#xff0c;富丽宝石国际控股有限公司&#xff08;下称“富丽宝石”&#xff09;在港交所的上市申请已经“失效”&#xff0c;目前已无法正常查看或下载。在此之前&#xff0c;富丽宝石先后于2021年6月28日、2022年6月29日在…