优化字体和图像
书接上回，我们学习了如何设计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。最好将图像的和设置为以避免布局偏移，这些应该与源图像的纵横比相同。
更详细内容查看
独立博客 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” 微信公众号
