Next.js 独立开发教程（四）：字体与图像优化指南

系列文章目录

Next.js 开发教程(一)：入门指南-CSDN博客

Next.js 开发教程（二）：从零构建仪表盘应用-CSDN博客

Next.js 开发教程（三）：CSS 样式的完整指南-CSDN博客

Next.js 独立开发教程（四）：字体与图像优化指南

Next.js 独立开发教程 (五)：创建布局和页面-CSDN博客

有兴趣的可以蹲个后续，我会陆续发布一系列的文章。

以建设独立开发能力为目标，精选一些实用的技术和非技术的内容跟大家分享。

引言

1. 字体优化：提升文本呈现性能

1.1 Web 字体的加载挑战

1.2 使用 Next.js 内置的 Google 字体优化

步骤 1：安装必要的包

步骤 2：引入 Google 字体

步骤 3：配置字体选项

1.3 自定义字体的加载

2. 图像优化：高效加载与展示

2.1 图像优化的重要性

2.2 使用 next/image 组件

步骤 1：引入 next/image

步骤 2：配置图像优化选项

2.3 响应式图像

2.4 图像占位符为了提升用户体验，可以为延迟加载的图像设置占位符，避免加载过程中的空白区域。

3. 在仪表盘应用中实践字体与图像优化

3.1 全局字体优化

3.2 高效图像展示

4. 总结与最佳实践

4.1 字体优化

4.2 图像优化

引言

在现代 Web 应用中，字体和图像的优化是影响用户体验和页面性能的关键因素。Next.js 提供了开箱即用的优化工具，使开发者能够轻松管理和提升字体与图像的加载性能。在这篇文章中，我们将基于 Next.js 的特性，详细介绍如何优化字体和图像，并应用到实际的仪表盘项目中。

1. 字体优化：提升文本呈现性能

1.1 Web 字体的加载挑战

传统的 Web 字体加载方式可能导致以下问题：

闪烁的无样式文本（FOIT）：在字体加载完成前，页面显示为空白或默认字体。
闪烁的样式化文本（FOUT）：加载完成后，页面的字体突然改变。

Next.js 提供了内置的字体优化功能，通过减少网络请求、提供延迟加载选项等方式优化字体加载性能。

1.2 使用 Next.js 内置的 Google 字体优化

Next.js 集成了 Google 字体服务，允许开发者直接使用优化后的字体加载。以下是应用 Google 字体的步骤。

步骤 1：安装必要的包

Next.js 内置的 Google 字体优化功能无需额外配置，但推荐通过以下方式快速使用：

npm install next/font

步骤 2：引入 Google 字体

以下是在 `pages/_app.js` 中引入字体的示例：

// pages/_app.js
import { Roboto } from 'next/font/google';const roboto = Roboto({subsets: ['latin'],weight: ['400', '700'],style: ['normal', 'italic'],display: 'swap', // 避免 FOIT
});export default function MyApp({ Component, pageProps }) {return (<div className={roboto.className}><Component {...pageProps} /></div>);
}

步骤 3：配置字体选项

Next.js 的 Google 字体 API 支持多个选项：

weight：定义不同的字重（如 400、700）。

subsets：指定语言子集（如 `latin`、`cyrillic`）。

display：设置字体显示策略（推荐使用 `swap`）。

使用 `display: swap` 可以避免 FOIT，确保用户在字体加载时看到回退字体。

---

1.3 自定义字体的加载

如果项目中需要使用自定义字体（例如公司品牌字体），可以通过以下方式实现：
1. 将字体文件放置在 `public/fonts` 目录中。
2. 使用 CSS 或 CSS 模块加载字体。

以下是一个示例：

/* styles/globals.css */
@font-face {font-family: 'MyCustomFont';src: url('/fonts/MyCustomFont.woff2') format('woff2'),url('/fonts/MyCustomFont.woff') format('woff');font-weight: normal;font-style: normal;
}body {font-family: 'MyCustomFont', sans-serif;
}

此方法可以确保字体文件随应用一起部署，并通过 Next.js 的内置优化工具自动提升性能。

2. 图像优化：高效加载与展示

2.1 图像优化的重要性

未优化的图像可能导致以下问题：

页面加载缓慢：较大的图像文件会显著增加加载时间。
高数据消耗：对移动设备用户来说，未优化的图像会消耗更多流量。
低质量展示：在高分辨率屏幕上，低质量的图像可能显得模糊。

Next.js 内置的 `next/image` 组件提供了强大的优化功能，包括延迟加载、自适应尺寸、和自动压缩。

2.2 使用 next/image 组件

next/image 是 Next.js 提供的默认图像优化组件，它通过以下功能提升图像性能：

自动优化：图像会根据设备尺寸自动调整分辨率。
延迟加载：默认情况下，图像在进入视窗时才加载。
内置响应式：通过设置尺寸属性，图像可以根据屏幕大小自适应。

步骤 1：引入 next/image

在仪表盘页面中使用优化后的图像：

// pages/dashboard.js
import Image from 'next/image';export default function Dashboard() {return (<div><h1>仪表盘</h1><Image src="/images/dashboard.png" alt="Dashboard Image" width={600} height={400} priority // 提高页面加载时的优先级/></div>);
}

步骤 2：配置图像优化选项

默认情况下，Next.js 只允许优化来自同一域的图像。如果需要加载外部图像，可以通过 `next.config.js` 进行配置：

// next.config.js
module.exports = {images: {domains: ['example.com'], // 添加允许加载的图像域名},
};

2.3 响应式图像

通过设置 `layout` 属性，`next/image` 可以轻松实现响应式图像：

<Image src="/images/responsive.jpg" alt="Responsive Image" layout="responsive" width={16} height={9} 
/>

此示例中，`layout="responsive"` 根据宽高比调整图像尺寸，确保在不同设备上始终显示最佳比例。

2.4 图像占位符
为了提升用户体验，可以为延迟加载的图像设置占位符，避免加载过程中的空白区域。

<Image src="/images/dashboard.png" alt="Dashboard Image" width={600} height={400} placeholder="blur" blurDataURL="/images/blur-placeholder.png" 
/>

此方法会在图像加载完成前显示模糊效果，占位符可通过 `blurDataURL` 指定。

3. 在仪表盘应用中实践字体与图像优化

结合字体与图像优化的技术，我们将在仪表盘页面实现高性能加载。

3.1 全局字体优化

在 `_app.js` 中使用 Google 字体 "Inter" 并设置全局样式：

// pages/_app.js
import { Inter } from 'next/font/google';const inter = Inter({ subsets: ['latin'], weight: ['400', '700'] });export default function MyApp({ Component, pageProps }) {return (<div className={inter.className}><Component {...pageProps} /></div>);
}

3.2 高效图像展示

在仪表盘页面中展示动态图像列表：

// pages/dashboard.js
import Image from 'next/image';const images = [{ src: '/images/graph1.png', alt: 'Graph 1', width: 600, height: 400 },{ src: '/images/graph2.png', alt: 'Graph 2', width: 600, height: 400 },
];export default function Dashboard() {return (<div><h1>仪表盘</h1>{images.map((img, index) => (<Image key={index} src={img.src} alt={img.alt} width={img.width} height={img.height} placeholder="blur" />))}</div>);
}