优化字体和图像

书接上回，我们学习了如何设计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. Java学习笔记2--JDK的安装和配置

    一.进入oracle官网,下载jdk oracle官网:Oracle | Cloud Applications and Cloud Platform ps:不同的浏览器,可能进入oracle官网,会只 ...

  2. 关于Vue + element plus包装Component理解

    关于Vue + element plus包装Component理解 一.关于编写思路 我以设计el-select选择框进行举例说明 父组件与Component传递params与Function使用Pr ...

  3. 远程采集服务器指标信息（二）通过telnet执行远程命令

    远程采集服务器信息,比如说磁盘信息.内存信息. 现介绍java通过telnet执行命令采集服务器信息,比如说执行df.ls.top. 这里在linux环境通过root或者其他用户登录执行解析方式有点出 ...

  4. T113s工业套件简述

    T113s工业套件简述 提示 T113开发交流QQ群:120575746 此开发板的任何问题都可以在我们的论坛交流讨论 https://forums.100ask.net/c/aw/ 硬件简述​ 10 ...

  5. 学习设计微服务：api认证

    前言最近再学习微服务,所以把自己的个人站点https://www.ttblog.site/拆分成微服务.目前正在思考微服务里面的认证与授权,网上百度到都是根据用户名和密码来实现的,考虑到实际的原因,我 ...

  6. NEWSTAR PWN WEEK1

    ret2text 一个简单的栈溢出 栈溢出指的是程序向栈中某个变量中写入的字节数超过了这个变量本身所申请的字节数,因而导致与其相邻的栈中的变量的值被改变.这种问题是一种特定的缓冲区溢出漏洞,类似的还有 ...

  7. 排除log4j-api ( 排除log4j )

    写法都一样,排除log4j,或者其相关的依赖 1. gradle: 1.1 判断是否有log4j a. 将war或jar解压后,搜索log4j b. 使用IDEA gradle菜单, 项目名-> ...

  8. sicp每日一题[2.1]

    Exercise 2.1 Exercise 2.1: Define a better version of make-rat that handles both positive and negati ...

  9. Pointer Event Api-整合鼠标事件、触摸和触控笔事件

    Pointer Events API 是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse).触摸(touch)和触控笔(pen)三种事件整合为统一的API. Pointer Event P ...

  10. 深度学习Python代码小知识点(备忘，因为没有脑子)

    现在是2024年4月24日16:58,今天摸鱼有点多,备忘一下,都写到一篇内容里面,免得分散. 1. np.concatenate()函数'np.concatenate'是NumPy库中用来合并两个或 ...