Next.js框架入门笔记

news/2024/3/28 23:52:45/文章来源:https://blog.csdn.net/qq_28992047/article/details/131729214

内置组件

‘pages/_document.js’ 文件,自定义document
DOC: https://www.nextjs.cn/docs/advanced-features/custom-document

<Head>组件

<Head>是一个内置在 Next.js 中的 React 组件。它允许您修改页面的<head>。
Docs: https://www.nextjs.cn/docs/api-reference/next/head

<Link>组件

import Link from '/next/link'
  • <Link>组件切换路由,不会刷新浏览器。
  • 而<a>标签切换链接时浏览器会进行完全刷新。

Next.js 会自动进行代码拆分,因此每个页面只加载该页面所需的内容。这意味着在呈现主页时,最初不会提供其他页面的代码。
即使您添加数百个页面,这也可以确保主页快速加载。
仅加载您请求的页面的代码也意味着页面变得孤立。如果某个页面抛出错误,应用程序的其余部分仍然可以工作。
此外,在 Next.js 的生产版本中,每当Link组件出现在浏览器的视口中时,Next.js 都会自动在后台预取链接页面的代码。当您单击链接时,目标页面的代码已经在后台加载,页面转换几乎是即时的!
Next.js 通过代码拆分、客户端导航和预取(在生产中)自动优化您的应用程序以获得最佳性能。

  1. 链接到站点外的页面,请使用 标签。
  2. 给链接添加样式,添加属性时,‘className’ 是添加在 标签上的。

2. 资源、元数据和css

2.1 样式

Next.js 内置了对 CSS 和 Sass 的支持。支持导入:导入.css和.scss文件。

  1. 内联写法:
<style jsx>{`…
`}</style>

上面代码使用一个名为 styled-jsx 的库。意思是“css-in-js” 库 —— 允许你在 React 组件中编写 CSS。这时 CSS 样式被限制只在当前组件有效。Next.js 内置对 styled-jsx 的支持,但也可以使用其他流行的 CSS-In-JS库,如:styled-components或Emotion。

  1. 独立样式文件

📢:1. 使用Css Modules, 文件名必须以 .module.css
2. Css Module会自动生成唯一类型, 不用担心 className 冲突。
3. Next.js代码拆分也对 Css Module 适用,为每个页面加载最少的Css。这导致更小的包。

  1. 全局样式
    在 pages 文件下创建一个 _app.js 文件。这个 APP 组件是通用顶级组件,对所有页面通用。可以用这个组件在页面之间导航时保存状态。

📢:添加 pages/_app.js 后需要重启开发服务。
创建顶级目录 styles,里面创建一个 global.css 文件。

  1. 使用 classnames 库切换样式
// 安装
npm install classnames  
// or
yarn add classnames

Docs: https://github.com/JedWatson/classnames

  1. 自定义 PostCSS 配置
    Next.js使用 PostCSS 编译CSS。 可以通过自定义postcss.config.js去配置。

  2. 使用Sass
    在您可以使用 Next.js 的内置 Sass 支持之前,请务必安装sass:

npm install sass

2.2 静态资源

静态资源放置在 Next.js 项目根目录下的 public 文件夹下。
Docs: 静态文件服务

2.3 元数据

通过内置 组件修改。

2.4 布局组件

根目录下新建 components 文件夹。在里面,新建一个名为 layout.js 文件。

3. 预渲染和数据获取

3.1 预渲染

默认情况下,Next.js 预渲染每个页面。这意味着 Next.js会提前为每个页面生成 HTML,而不是全部由客户端 JavaScript 完成。预渲染可以带来更好的性能和SEO。
“预渲染”与“无预渲染”:
在这里插入图片描述
在这里插入图片描述

3.2 两种形式预渲染:静态生成和服务端渲染

两种预渲染形式的区别:何时为页面生成HTML。

`静态生成服务端渲染
何时生成Html构建时请求时
适用场景内容固定,不会频繁更新的页面页面会显示频繁更新的数据时,或页面内容会随每个请求而改变时。
速度更快 (构建一次并存储在CDN服务上,比每次请求时生成 Html 要更快)更慢 (但预渲染的页面将始终是最新的)

在这里插入图片描述
在这里插入图片描述

注意: 开发模式下,每个页面都是在请求时进行预渲染。即使使用静态生成也是如此!

3.3 “混合”Next.js应用程序

即 Next.js 允许在一个应用中,不同页面同时使用两种预渲染方式,如下图所示:
在这里插入图片描述

我们可以为大多数页面使用静态生成,部分其他页面使用服务端渲染。

3.4 静态生成

静态生成可以在有数据和没有数据的情况下完成。

  1. 静态生成——不带数据
    当页面中不需要获取外部数据时,在生产构建时,会被自动静态生成。在这里插入图片描述

  2. 带数据的静态生成
    针对的场景:呈现HTML之前需要先获取数据。如,构建时访问文件系统、获取外部API、查询数据库。
    Next.js 开箱即用的支持这种情况 —— 即带数据的静态生成。在这里插入图片描述

3.5 getStaticProps 函数

在 Next.js 组件中,加上名为 getStaticProps 的 async 函数。

  • getStaticProps 会在生产构建时被执行。
  • 在该函数里,可以获取外部数据,并将数据作为 props 发送给页面。
export default function Home(props) { ... }export async function getStaticProps() {// Get external data from the file system, API, DB, etc.const data = ...// The value of the `props` key will be//  passed to the `Home` componentreturn {props: ...}
}

注意:

  1. 开发模式下, getStaticProps会自动改为在页面请求时运行。
  2. getStaticProps 仅在服务端运行。它永远不会在客户端运行。甚至不会包含在浏览器的 JS 包中。
  3. getStaticProps 只能从页面导出。不能从非页面文件中导出。

3.6 在请求时获取数据 —— 服务端渲染在这里插入图片描述

  1. getServerSizeProps
    如你所见,getServerSideProps 类似于 getStaticProps,但两者的区别在于 getServerSideProps 在每次页面请求时都会运行,而在构建时不运行。
  2. 客户端渲染
    可以选择,同一个页面中不需要获取外部数据的部分在构建时直接 “静态生成”。其他部分在浏览器加载时 JS 请求获取后渲染。
  3. SWR
    swr是一个 React 数据获取 hook。
import useSWR from 'swr'function Profile() {const { data, error } = useSWR('/api/user', fetch)if (error) return <div>failed to load</div>if (!data) return <div>loading...</div>return <div>hello {data.name}!</div>
}

4. 部署 Next.js 应用程序

4.1 代码提交到Github

4.2 部署到 Vercel

Vercel 是什么?
Vercel (之前也叫 Zeit 或 now.sh) 是一家提供静态网站托管的云平台,支持从 Github, GitLab, Bitbucket 等代码仓库中自动拉取代码 然后进行项目打包和部署等功能。

  1. 创建一个 Vercel 账号。
  2. 导入你的 nextjs-blog 存储库。
    • 需要为你的额 GitHub 安装 Vercel。
    • 部署时,你的 Next.js 应用程序将开始构建。

4.3 Next.js 和 Vercel

Learn | Next.js

4.4 其他托管选项

Next.js 可以部署到任何支持 Node.js 的托管服务提供商。

其他文章与教程

  • 从 React 转换到 Next.js 的五个理由
  • React服务器端渲染之NextJS实战 | 千峰教育
  • Next.js+React+Node系统实战,搞定SSR服务器渲染 | 实战课程_慕课网
  • React服务器渲染原理解析与实践
  • React SSR 服务端渲染原理解析与同构实践

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

报错400是什么怎么解决呢?

首先要了解400错误是什么错误&#xff1a; HTTP状态码400表示"错误请求"。它是一种客户端错误状态码&#xff0c;表示服务器无法理解请求的语法或参数。当服务器收到一个无效的请求时&#xff0c;通常会返回400错误码。这可能是由于请求中缺少必要的参数、参数格式错…

关于AWS MSK Connector Execution Role的解释

尽管在创建AWS MSK Connector时&#xff0c;Execution Role是一个必填项&#xff0c;就像下面这样&#xff1a; 并且在官方文档中给出的Execution Role样例&#xff1a; https://docs.aws.amazon.com/msk/latest/developerguide/msk-connect-service-execution-role.html 中也…

linux X系统 X窗口系统(X Window System)

Xorg是一个开放源代码的跨平台的图形系统&#xff0c;它是UNIX和Linux的主要图形系统&#xff0c;它的前身是XFree86。 Xorg是在桌面环境中提供显示和图形输入设备支持的主要架构。 它支持多种输入设备&#xff0c;如键盘&#xff0c;鼠标&#xff0c;触摸屏&#xff0c;手写板…

电能管理系统在路店上的应用 安科瑞 许敏

摘要&#xff1a;随着企业改革的不断深入&#xff0c;对现代化用电管理的水平要求越来越高&#xff0c;准确、快速、经济的获得用电回路的各类数据进行用电分析、负荷管理、表计运行状况监测、电费自动结算的基础。同时也是提高企业经济效益的有效手段。近年来技术人员对监控系…

「解决方案」如何通过WiFi蓝牙二合一模块实现智能控制-工业控制

在物联网急速发展的现今&#xff0c;智能家居&#xff0c;智慧工业场景主流的智能控制方案多依赖于wifi技术&#xff0c;蓝牙技术来实现。而蓝牙-Wifi双模SOC方案&#xff0c;凭借集成wifi、蓝牙技术的低功耗、低成本&#xff0c;配网成功率高等特点&#xff0c;也在物联网智能…

24种人格力量,好奇心的力量以及特征分析

人格力量是一种可支配的价值观&#xff0c;它能让人向往美好的远景&#xff0c;极大地促进人的工作发展。via认为好奇心是人格力量的种类之一。 借助via 24种人格力量测试&#xff0c;探索人格优势&#xff0c;可以帮助我们更好的发现自身的优势&#xff0c;发挥自己的潜能。从…

REMB-接收端最大接收码率评估

draft-alvestrand-rmcat-remb-03 接收方带宽估计的RTCP消息 REMB_fanyamin的博客-CSDN博客 webrtc中的码率控制_webrtc设置码率_linux_vae的博客-CSDN博客 参考&#xff1a; Walter: WebRTC 拥塞控制之 REMB - 接收方带宽估计 - 简书 WebRTC基于TransportCC和Trendline Fil…

[java安全]URLDNS

文章目录 [java安全]URLDNS前言HashMapURLURLStreamHandler调用过程调用链流程图POC [java安全]URLDNS 前言 URLDNS利用链是一条很简单的链子&#xff0c;可以用来查看java反序列化是否存在反序列化漏洞&#xff0c;如果存在&#xff0c;就会触发dns查询请求 它有如下优点&a…

探索Python异常:让程序不再崩溃!

文章目录 前言什么是异常捕获异常基本语法捕获指定类型异常捕获多个指定类型的异常捕获异常描述信息捕获所有异常elsefinally 异常的嵌套自定义异常结语 前言 在编程的世界中&#xff0c;我们常常会面对各种各样的错误和异常情况。尤其当我们使用Python这样的高级编程语言时&a…

MySQL [环境配置]

MySQL [环境配置] MySQL的下载sqlyog的下载 熟悉老陈的人, 都清楚我不喜欢写这些环境配置的博客 那为啥这次要写一下MySQL的环境配置呢? 因为我被这一个小小的环境配置困扰了很长时间, 淋过雨的人都想为别人撑一把伞, 我不希望我的铁汁们也被这个问题困扰 MySQL的下载 MySQL下…

使用git克隆非自己账号的项目

在地址的中https://或者http://后添加要使用的 账号名项目地址&#xff0c;就会提示输入对应账号的密码&#xff0c;进行克隆。 如果克隆别人的项目&#xff0c;你将别人给你的项目地址克隆&#xff0c;此时身份验证是别人的用户名&#xff0c;这时你输入自己的密码就会验证失败…

在 3ds Max 中对二战球形炮塔进行建模

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 实际上被称为“斯佩里球炮塔”&#xff0c;它被用于二战的B-17和B-24轰炸机。 本教程介绍如何在 3ds Max 中对球形转塔进行建模。建模时&#xff0c;您将使用背景图片作为辅助。首先创建一个低多边形球体。…

thinkphp 上传图片

public function upload_img(){// 读取图片资源// 存储路径$path "uploads/avatar";$file request()->file(background_img);// 存储图片$info $file->rule(uniqid)->move($path);// 存储成功if ($info) {//获取到上传图片的路径名称$name_img $path . …

metersphere数据库SQL断言应用

在使用metersphere的时候&#xff0c;需要查询数据库数据来验证接口是否正常&#xff0c;在查看使用手册时&#xff0c;发现不是很明确&#xff0c;在研究一点时间后&#xff0c;终于明白&#xff0c;在此写下心得。 metersphere使用手册地址&#xff1a;接口测试 - 接口用例操…

界面控件DevExtreme v23.1新版亮点 - 全新的DateRangeBox组件

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合&#xff0c;使您可以利用现代Web开发堆栈&#xff08;包括React&#xff0c;Angular&#xff0c;ASP.NET Core&#xff0c;jQuery&#xff0c;Knockout等&#xff09;构建交互式的Web应用程序。从Angular和Reac&#xff0c…

语义分割混淆矩阵、 mIoU、mPA计算

一、操作 需要会调试代码的人自己改&#xff0c;小白直接运行会出错 这是我从自己的大文件里摘取的一部分代码&#xff0c;可以运行&#xff0c;只是要改的文件地址path比较多&#xff0c;遇到双引号“”的地址注意一下&#xff0c;不然地址不对容易出错 把 calculate.py和 u…

干货 | 一个漏洞利用工具仓库

0x00 Awesome-Exploit 一个漏洞证明/漏洞利用工具仓库 不定期更新 部分漏洞对应POC/EXP详情可参见以下仓库&#xff1a; https://github.com/Threekiii/Awesome-POC https://github.com/Threekiii/Vulhub-Reproduce 0x01 项目导航 ActiveMQ CVE-2015-5254 Apisix CVE-2…

Unreal Engine 与 Blender - 比较指南

虚幻引擎和 Blender 是游戏开发人员中最常用的两种软件&#xff0c;它们在游戏开发工作流程中都有自己的用途和地位。作为进入视频游戏行业的初学者&#xff0c;可能很难从数十种软件中筛选找到最适合您需求的一款。希望本指南能够缓解这一困难并帮助您决定选择哪个软件。 虚幻…

前端面试题-js(三)

31 介绍js有哪些内置对象 Object 是 JavaScript 中所有对象的⽗对象数据封装类对象&#xff1a; Object 、 Array 、 Boolean 、 Number 和 String其他对象&#xff1a; Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error 32 说⼏条写JavaScript的基本规范 不要在同…