优化字体和图像

书接上回，我们学习了如何设计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最新版的更多相关文章

  1. 使用 PHP 来做 Vue.js 的 SSR 服务端渲染

    对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...

  2. Vue.js与 ASP.NET Core 服务端渲染功能整合

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  3. NET Core 与 Vue.js 服务端渲染

    NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/原作者: ...

  4. 服务端渲染和nuxt简单介绍

    概述 最近研究了一下服务端渲染,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Vue SSR指南 nuxt.js官网 服务端渲染介绍 服务端渲染简单来说,就是分别对项目用we ...

  5. 服务端渲染 数据驱动 不是渲染后的网页，而是一个由html和Javascript组成的app ssr 隐藏接口服务器

    小结: 1. 服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务器给到客户端的已经是 ...

  6. vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器

    vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器SSR 完全指南https://cn.vuejs.org/v2/guide/ssr.html在 2.3 发布后我们发布了一份完 ...

  7. （十分钟视频教程）nodejs基础实战教程3：react服务端渲染入门篇

    视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...

  8. Nuxt.js vue服务端渲染

    一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比 1. build后目标产物不同 vue ...

  9. react+redux教程（六）redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  10. Vue.js 服务端渲染业务入门实践

    作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...

随机推荐

  1. "揭秘CentosChina爬虫项目：掌握Scrapy框架的必备技巧与数据库设计"

    Centoschina 项目要求 爬取centoschina_cn的所有问题,包括文章标题和内容 数据库表设计 库表设计: 数据展示: 项目亮点 低耦合,高内聚. 爬虫专有settings custo ...

  2. git忽略文件夹中除了指定的文件外的其他所有文件

    **/test/* !**/test/a.py

  3. 【CMake系列】11-CMake Pack

    cmake pack 用于将我们的写好的项目 打包,发送给使用方:打包后产生的内容有 源代码包 二进制包 平台原生的二进制安装 Debian -> .deb red hat -> .rpm ...

  4. 目标追踪 ByteTrack 算法详细流程分析

    原理介绍 ByteTrack是字节跳动与2021年10月份公开的一个全新的多目标跟踪算法,原论文是<ByteTrack: Multi-Object Tracking by Associating ...

  5. AI的那些名词

    AI 是什么? Artificial Intelligence,即人工智能,1956年于Dartmouth学会上提出,一种旨在以类似人类反应的方式对刺激做出反应并从中学习的技术,其理解和判断水平通常只 ...

  6. Terraform管理云资源实践

    背景 Terraform是一款开源的Cli工具,网上的很多文章都是单机安装一个然后创建个目录就去操作云资源:如果在高可用的前提,如何将Terraform cli变成一个嵌入运维流程的一个组件?不仅仅是 ...

  7. 使用 updateAppConfig 更新 Nuxt 应用配置

    title: 使用 updateAppConfig 更新 Nuxt 应用配置 date: 2024/8/27 updated: 2024/8/27 author: cmdragon excerpt: ...

  8. 工作 6 年，@Transactional 注解用的一塌糊涂

    接手新项目一言难尽,别的不说单单就一个 @Transactional 注解用的一塌糊涂,五花八门的用法,很大部分还失效无法回滚. 有意识的在涉及事务相关方法上加@Transactional注解,是个好 ...

  9. 【YashanDB知识库】汇聚库23.1环境发生coredump

    [标题]汇聚库23.1环境发生coredump [问题分类]数据库错误 [关键词]YashanDB, 汇聚库, coredump [问题描述]在23.1.1.200版本数据库环境创建dblink.视图 ...

  10. RestoreFormer++: Towards Real-World Blind Face Restoration from Undegraded Key-Value Pairs(IEEE,2023,8)

    RestoreFormer++: Towards Real-World Blind Face Restoration from Undegraded Key-Value Pairs(IEEE,2023 ...