异常教程

Next.js 图片和字体（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，图片和字体的优化直接关系到用户体验和页面性能。Next.js 作为 React 的流行框架，提供了丰富的工具和最佳实践来简化这些任务。本文将深入探讨如何在 Next.js 中高效处理图片和字体资源，帮助开发者从基础到进阶掌握关键技巧。无论你是刚接触 Next.js 的编程新手，还是希望提升项目性能的中级开发者，都能从中获得实用的知识和案例。

图片处理：静态与动态加载的平衡

静态图片优化

Next.js 默认支持静态资源的自动优化，开发者只需将图片放入 public 目录或通过 import 语法引用，框架会自动处理格式转换和尺寸适配。例如，当用户设备支持 WebP 格式时，Next.js 会自动返回优化后的图片，无需手动配置。

代码示例：静态图片导入

import MyImage from '../public/logo.png';  

function Home() {  
  return <img src={MyImage} alt="Logo" />;  
}

自动优化的比喻
可以把 Next.js 的静态图片优化想象成一个智能快递系统：你只需要填写收件地址（即图片路径），系统会自动选择最优的运输方式（图片格式）和包装尺寸（响应式图片），确保用户快速收到“包裹”（加载图片）。

动态图片加载与懒加载

对于动态生成或需要按需加载的图片，Next.js 提供了 next/image 组件，结合 next/dynamic 实现懒加载。通过 unoptimized 属性可绕过默认优化，适用于特殊场景如第三方图片服务。

代码示例：动态图片懒加载

import dynamic from 'next/dynamic';  

const LazyImage = dynamic(() => import('../components/Image'), {  
  loading: () => <div>Loading...</div>,  
  ssr: false,  
});  

function ProductPage({ product }) {  
  return (  
    <div>  
      <LazyImage src={product.imageUrl} alt={product.name} />  
    </div>  
  );  
}

关键点解释
next/image 组件会自动添加 layout 和 sizes 属性，确保图片按视口尺寸加载，而 next/dynamic 则像“分段式传送门”，只有用户滚动到相关区域时才会加载组件内容，减少初始加载压力。

字体优化：从引入到性能提升

字体引入的三种方式

Next.js 支持通过 @next/font 包引入字体，提供三种模式：

  1. 本地字体：适用于已有的本地字体文件（如 .ttf、.woff）。
  2. Google 字体：直接集成 Google Fonts 的字体。
  3. 远程字体：从 CDN 或自定义 URL 加载字体。

代码示例：Google 字体引入

import { Inter } from 'next/font/google';  

const inter = Inter({  
  subsets: ['latin'],  
  variable: '--font-inter',  
});  

function Layout({ children }) {  
  return (  
    <div className={inter.className}>  
      {children}  
    </div>  
  );  
}

自动预加载与按需加载

@next/font 默认会自动为字体添加 preload 标签，确保字体在页面加载时优先加载。对于大型字体库，开发者可通过 display 属性控制渲染策略，例如：

const font = Font({  
  src: 'path/to/font.woff2',  
  display: 'swap', // 立即显示回退字体，待加载后替换  
});

性能对比
未使用 Next.js 字体优化时，字体可能阻塞页面渲染；而通过框架的智能策略，字体加载与内容渲染并行，用户几乎察觉不到延迟。

进阶技巧：图片与字体的协同优化

图片与字体的并行加载策略

通过 next.config.js 配置资源优先级：

module.exports = {  
  images: {  
    loader: 'imgix', // 或 'cloudinary' 等第三方服务  
    domains: ['example.com'], // 白名单域名  
  },  
  async headers() {  
    return [  
      {  
        source: '/:path*',  
        headers: [  
          { key: 'Cache-Control', value: 'public, max-age=31536000' },  
        ],  
      },  
    ];  
  },  
};

响应式图片与字体的尺寸适配

结合 next/image 的 sizes 属性和 CSS 媒体查询，确保不同屏幕尺寸下的资源按需加载：

<img  
  src="/logo.png"  
  alt="Logo"  
  sizes="(max-width: 768px) 100vw, 50vw"  
  style={{ width: '100%', height: 'auto' }}  
/>

案例：电商产品页的优化
假设一个产品详情页同时需要展示高清图片和定制字体，开发者可采取以下步骤：

  1. 使用 next/image 自动压缩图片，并添加 priority 属性保证关键图片优先加载。
  2. 通过 @next/font 按需加载字体，避免首屏渲染阻塞。
  3. 在 getStaticProps 中预加载热门字体变体，减少动态请求。

性能监控与调试

开发者工具的使用

利用 Next.js 内置的 next build 报告和浏览器开发者工具的“网络”面板，可以直观查看图片和字体的加载性能。重点关注以下指标：

  • LCP（最大内容绘制时间）：确保关键图片加载在 2.5 秒内。
  • 字体加载策略：检查是否有字体引发的“闪屏”现象。

A/B 测试与渐进式优化

通过工具如 next-extend 或第三方服务（如 Split.io），可以对不同图片格式（如 AVIF vs WebP）或字体加载策略进行 A/B 测试，选择最优方案。

结论

通过 Next.js 的图片和字体优化工具，开发者可以显著提升网站性能并改善用户体验。无论是静态资源的自动压缩，还是动态加载的精细控制，框架都提供了开箱即用的解决方案。建议读者从基础案例开始实践，逐步探索更复杂的场景，例如结合 CDN 或第三方服务实现更细粒度的资源管理。记住，性能优化是一个持续迭代的过程，合理利用 Next.js 的特性，能让你在开发效率与用户体验之间找到最佳平衡点。

（全文约 1800 字）

最新发布

查看更多文章