Next.js 图片和字体

在现代 Web 开发中，优化图片和字体对于提升网站性能和用户体验至关重要。Next.js 提供了一系列内置功能，可以帮助你轻松地处理这些静态资源，实现自动优化。

1. 静态文件服务

Next.js 通过 public 目录来提供静态文件服务，例如图片、图标、robots.txt 等。public 目录下的任何文件都可以通过应用的根 URL (/) 来访问。

示例：

将一张名为 logo.png 的图片放入 public 目录。
你可以在代码中通过 /logo.png 来引用这张图片。

function MyLogo() {
  return <img src="/logo.png" alt="My Company Logo" />;
}

注意：不要将 public 目录用于存放编译后的资源或动态生成的文件。它只应用于存放不需要构建处理的静态资源。

2. 图片优化 (`next/image`)

直接使用 HTML 的 <img> 标签可能会导致性能问题，例如：

加载大尺寸图片：即使在小屏幕设备上，也会加载原始尺寸的图片，浪费带宽。
无懒加载：视口外的图片会立即加载，影响初始页面加载速度。
布局偏移 (Layout Shift)：图片加载时可能会导致页面布局突然变化。

为了解决这些问题，Next.js 提供了 <Image> 组件，它是对 <img> 标签的扩展，并提供了自动的图片优化功能。

如何使用 `next/image`

导入组件：
```
import Image from 'next/image';
```

使用组件：

import profilePic from '../public/me.png'; // 导入本地图片

function MyProfile() {
  return (
    <Image
      src={profilePic} // 可以是静态导入的图片或一个 URL 字符串
      alt="Picture of the author"
      width={500} // 必须提供尺寸以避免布局偏移
      height={500}
      // placeholder="blur" // 可选：提供模糊占位图
      // blurDataURL="..." // 可选：自定义模糊占位图
    />
  );
}

`next/image` 的核心优势

自动调整尺寸：根据设备屏幕大小提供正确尺寸的图片。
自动懒加载：默认情况下，视口外的图片会延迟加载。
防止布局偏移：通过要求提供 width 和 height 属性，可以预留图片空间，防止页面跳动。
自动格式转换：可以自动将图片转换为现代格式（如 WebP），以减小文件大小。

远程图片

如果你需要加载来自外部 CDN 或其他域的图片，你需要在 next.config.js 文件中配置允许的域名，以确保安全。

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https'
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

3. 字体优化 (`next/font`)

Web 字体的加载同样会影响性能，可能导致 FOIT (Flash of Invisible Text) 或 FOUT (Flash of Unstyled Text)。Next.js 13 推出了 next/font 模块，用于优化字体加载。

next/font 会在构建时下载字体文件，并将其与其他静态资源一起托管。这意味着：

无外部网络请求：浏览器无需向 Google Fonts 等服务发送额外的网络请求。
隐私友好：不会与第三方服务共享用户信息。
自动 font-display：自动设置 font-display: optional，以获得最佳性能。

如何使用 `next/font`

使用 Google Fonts

从 next/font/google 导入字体：

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

加载字体：

const inter = Inter({ subsets: ['latin'] });
const lusitana = Lusitana({ subsets: ['latin'], weight: ['400', '700'] });

在组件中应用字体：

你可以将字体应用于全局或特定元素。

全局应用 (在 _app.js 中):

// pages/_app.js
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  );
}

局部应用:

const lusitana = Lusitana({ subsets: ['latin'], weight: ['400', '700'] });

function Heading() {
  return <h1 className={lusitana.className}>My Heading</h1>;
}

使用本地字体

从 next/font/local 导入：

import localFont from 'next/font/local';

加载本地字体文件：

const myFont = localFont({ src: '../styles/my-font.woff2' });

在组件中应用：

function MyComponent() {
  return <p className={myFont.className}>This text uses a local font.</p>;
}

总结

Next.js 通过 next/image 和 next/font 提供了强大的内置优化功能，可以显著提升网站的性能和用户体验。通过使用这些工具，你可以确保图片和字体以最高效的方式加载，同时避免常见的性能陷阱。在下一章中，我们将探讨如何组织和构建可重用的组件与布局。

#Next.js 图片和字体

#1. 静态文件服务

#2. 图片优化 (next/image)

#如何使用 next/image

#next/image 的核心优势

#远程图片

#3. 字体优化 (next/font)

#如何使用 next/font

#使用 Google Fonts

#使用本地字体

#总结