Next.js 深度教程：服务端渲染、静态生成到增量静态再生 | 2024最新版
优化字体和图像
书接上回，我们学习了如何设计Next.js应用程序，让我们继续优化主页和添加自定义字体、图像。
在网站设计中，字体扮演着关键角色，然而，若需获取并加载字体文件，项目中引入自定义字体可能对性能产生影响。
Google 采用累计布局偏移（CLS）作为评估网站性能和用户体验的指标。对于字体而言，布局偏移发生在浏览器先以备用字体或系统字体渲染文本，随后在自定义字体加载完成后进行替换时。这种替换可能导致文本大小、间距或布局的变动，进而影响周围元素的位置。
在使用 Next.js 的next/font模块时，该框架会自动优化应用程序中的字体。具体来说，它会在构建阶段下载字体文件，并将其与您的其他静态资源一同托管。这一过程确保了当用户访问您的应用程序时，不会因额外的字体网络请求而影响性能。
上回的目录结果是这样的，现在我们要在ui目录下面创建一个fonts.ts文件，用于控制字体信息
在fonts.ts上面导入字体模块
返回layout.tsx文件，为了更好的学习，我们把所有默认的内容全部删除掉，留下最简单的内容，将我们的字体模块应用在项目当中
import '@/app/ui/globals.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}
访问我们测试环境，使用浏览器的F12功能，点击查看器（Chrome浏览器），其他浏览器可能叫其他名字，查看body，发现我们的字体已经应用到了项目当中。
再回到字体页面page.tsx，我们要创建一个专门用于logo模块的字体，解析这个代码的意思 import { Lusitana } from 'next/font/google';从 Next.js 的 Google Fonts 集成中导入 Lusitana 字体。
weight: ['400', '700']指定了要使用的字体粗细。这里选择了两种粗细：'400' 是常规字重，'700' 是粗体字重。
subsets: ['latin'] 指定了字体的子集。这里选择了 Latin 子集，包含了基本的拉丁字符。
配置好字体之后，我们需要应用在不同的页面模块当中，现在我们需要修改页面的蓝色部分，在这个部分添加一个logo。
创建一个 app/ui/acme-logo.tsx 页面
首先我们要引入一个图标组件，在终端命令行中输入 pnpm install @heroicons/react
写入代码
import { GlobeAltIcon } from '@heroicons/react/24/outline';
import { lusitana } from '@/app/ui/fonts';
export default function AcmeLogo() {
return (
<div
className={`${lusitana.className} flex flex-row items-center leading-none text-white`}
>
<GlobeAltIcon className="h-12 w-12 rotate-[15deg]" />
<p className="text-[44px]">Warp Driver Logo</p>
</div>
);
}
pnpm 安装完成之后如果出现这样的错误Cannot find module '@heroicons/react/24/outline' or its corresponding type declarations.ts(2307)，可以通过重启ts服务器进行修复。
重启ts服务器的方法，在vscode上方输入 > TypeScript: Restart TS server,点击之后即可重启
接下来我们来到page.tsx页面，将我们的logo模块应用到主页当中
访问我们的测试环境，这里就能看到我们的logo应用到了网页当中
优化图像
Next.js 允许在顶级文件夹 /public 下提供静态资产（如图像）。这些文件可以在您的应用程序中直接引用。例如，在常规 HTML 中，您可以通过以下方式添加图像：
<img
src="/hero.png"
alt="Screenshots of the dashboard project showing desktop version"
/>
然而，这要求您手动执行以下操作：
1、确保图像能够适应不同的屏幕尺寸。
2、为不同的设备指定图像大小。
3、防止图像加载时布局发生偏移。
4、延迟加载用户视口之外的图像。
图像优化是 Web 开发中的一个重要主题，本身可以视为一门专业。您可以使用 Next.js的next/image组件自动优化图像，而无需手动实施这些优化。
现在我们需要往页面的右边添加一张图片，首先我们要将图片放在public文件夹当中，默认创建的脚手架是没有这个目录的，因此我们要在跟目录下创建这个文件夹，并且往文件夹里面添加图片
返回我们的page.tsx页面，添加图片依赖<Image>组件 import Image from 'next/image';
然后往我们屏幕的右边栏目增加图片
<Image
src="/helloo.png"
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard and invoices page"
/>
刷新页面即可看到图片样子啦，在这里，您要将像素设置为width和1000。最好将图像的和设置为以避免布局偏移，这些应该与源图像的纵横比相同。
如果你想看更多内容或者能够看到技术更新的内容，请百度搜索：曲速引擎 warp drive csdn 在首页找到我的地址访问即可，一线更新内容将会在我的个人博客上面更新，谢谢大家。
更详细内容查看
独立博客 https://www.dataeast.cn/
CSDN博客 https://blog.csdn.net/siberiaWarpDrive
B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0
关注 “曲速引擎 Warp Drive” 微信公众号
Next.js 深度教程：服务端渲染、静态生成到增量静态再生 | 2024最新版的更多相关文章
- 使用 PHP 来做 Vue.js 的 SSR 服务端渲染
对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...
- Vue.js与 ASP.NET Core 服务端渲染功能整合
http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...
- NET Core 与 Vue.js 服务端渲染
NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...
- 服务端渲染和nuxt简单介绍
概述 最近研究了一下服务端渲染,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Vue SSR指南 nuxt.js官网 服务端渲染介绍 服务端渲染简单来说,就是分别对项目用we ...
- 服务端渲染 数据驱动 不是渲染后的网页，而是一个由html和Javascript组成的app ssr 隐藏接口服务器
小结: 1. 服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务器给到客户端的已经是 ...
- vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器
vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器SSR 完全指南https://cn.vuejs.org/v2/guide/ssr.html在 2.3 发布后我们发布了一份完 ...
- （十分钟视频教程）nodejs基础实战教程3：react服务端渲染入门篇
视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...
- Nuxt.js vue服务端渲染
一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比 1. build后目标产物不同 vue ...
- react+redux教程（六）redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- Vue.js 服务端渲染业务入门实践
作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...
随机推荐
- Apache SeaTunnel社区首位学生Committer诞生！
采访对象 | 陈炳烨 采访人&编辑 | Debra Chen Apache SeaTunnel社区第一位学生Committer就此诞生!这位来自西安交通大学软件工程专业的同学从较为简单的文档修 ...
- 解决 Docker CE 在无根模式（rootless）下无法通过 IPv6 拉取映像的问题
折腾一天快把我逼疯了 本来 Docker 对 IPv6 的支持就不好,再来个 rootless,雪上加霜 首先,我们要区分 Docker Engine 和 里面的 Image. 拉取映像是 Docke ...
- manim 中的三维视角
今天研究了一下 manim 中的 ThreeDAxes 和 set_camera_orientation 这里记录一下视角. manim 中的 3D 坐标系是笛卡尔的三维坐标系,属于右手坐标系,即右手 ...
- IoTSharp：基于 .NET 8.0 的开源物联网平台
前言 想要快速了解物联网的世界吗?如果你对物联网(IoT)感兴趣,或者正打算开发自己的物联网项目.可以试试 IoTSharp,一个基于 .NET 的开源平台. 无论你是初学者还是有经验的大佬,IoTS ...
- centos7.3离线安装和配置NFS
概述 # NFS为 Network FileSystem 的简称,它的目的就是想让不同的机器.不同的操作系统可以彼此分享个别的档案啦! 目前在 Unix Like 当中用来做为文件服务器是相当不错的一 ...
- 6.2K star！推荐一款开源混沌工程测试平台：Chaos Mesh
1.Chaos Mesh 介绍 Chaos Mesh是一个开源的混沌工程平台,旨在帮助用户在生产环境中测试.验证和优化其应用程序的可靠性和稳定性.通过引入故障注入和混沌工程原则,Chaos Mesh可 ...
- VMware 安装 OpenWrt
准备 OpenWrt VMDK 固件映像 你可以直接下载 VMDK 版本的 OpenWrt 固件映像,或者自己构建一个,或者从 IMG 映像文件转换.一般来说 IMG 映像文件较为容易获取,因此下面介 ...
- Mac 使用远程 Ubuntu 机器进行时间备份
设置 SMB 服务 首先在 Ubuntu 中配置 SMB 服务.可以参考 Ubuntu 设置 SMB 服务. 创建 APFS 磁盘映像 我们在 Ubuntu 上创建出的 SMB 共享文件夹可以用来存放 ...
- python png 转 icon文件
pip install pillow from PIL import Image def png_to_ico(png_path, ico_path): img = Image.open(png_pa ...
- 【YashanDB知识库】YAS-02024 lock wait timeout, wait time 0 milliseconds
[标题]错误码处理 [问题分类]锁等待超时 [关键字]YAS-02024 [问题描述]执行语句时候,因锁等待超时执行语句失败 [问题原因分析]数据库默认锁等待时间为0秒,如果执行语句存在锁等待过长会执 ...