章節3

最佳化字體和圖片

在前一章節中，您已學會如何設定 Next.js 應用程式的樣式。讓我們繼續處理您的首頁，新增自訂字體和主視覺圖片。

本章節內容...

以下是我們將涵蓋的主題

如何使用 next/font 新增自訂字體。

如何使用 next/image 新增圖片。

字體和圖片在 Next.js 中是如何最佳化的。

為什麼要最佳化字體？

字體在網站的設計中扮演重要的角色，但在專案中使用自訂字體可能會影響效能，如果字體檔案需要被提取和載入的話。

累計版面配置偏移是 Google 用來評估網站效能和使用者體驗的指標。對於字體，當瀏覽器最初以回退或系統字體渲染文字，然後在自訂字體載入後將其替換時，就會發生版面配置偏移。這種替換可能會導致文字大小、間距或版面配置改變，進而使周圍的元素產生位移。

Mock UI showing initial load of a page, followed by a layout shift as the custom font loads.

當您使用 next/font 模組時，Next.js 會自動最佳化應用程式中的字體。它會在建置時期下載字體檔案，並與您的其他靜態資源一起託管。這表示當使用者造訪您的應用程式時，不會有額外的網路請求來請求字體，這會影響效能。

新增主要字體

讓我們將自訂的 Google 字體新增到您的應用程式，看看它是如何運作的。

在您的 /app/ui 資料夾中，建立一個名為 fonts.ts 的新檔案。您將使用此檔案來存放將在整個應用程式中使用的字體。

從 next/font/google 模組匯入 Inter 字體 - 這將是您的主要字體。然後，指定您想要載入的子集。在本例中，為 'latin'。

/app/ui/fonts.ts

import { Inter } from 'next/font/google';
 
export const inter = Inter({ subsets: ['latin'] });

最後，將字體新增到 /app/layout.tsx 中的 <body> 元素中。

/app/layout.tsx

import '@/app/ui/global.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>
  );
}

透過將 Inter 新增到 <body> 元素，字體將應用於整個應用程式。在這裡，您也新增了 Tailwind antialiased 類別，它可以使字體平滑。使用此類別並非必要，但它能增加美觀度。

導覽至您的瀏覽器，開啟開發者工具並選取 body 元素。您應該會看到 Inter 和 Inter_Fallback 現在已應用於樣式之下。

練習：新增次要字體

您也可以將字體新增到應用程式的特定元素。

現在輪到您了！在您的 fonts.ts 檔案中，匯入一個名為 Lusitana 的次要字體，並將其傳遞給您的 /app/page.tsx 檔案中的 <p> 元素。除了像之前一樣指定子集之外，您還應該指定不同的字體粗細。例如，400（一般）和 700（粗體）。

準備就緒後，展開下面的程式碼片段以查看解答。

提示

如果您不確定要將哪些粗細選項傳遞給字體，請查看程式碼編輯器中的 TypeScript 錯誤。

造訪 Google 字體網站並搜尋 Lusitana，以查看有哪些選項可用。

請參閱新增多種字體和完整選項列表的文件。

最後，<AcmeLogo /> 元件也使用了 Lusitana。它已被註解以防止錯誤，您現在可以取消註解它

/app/page.tsx

// ...
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
        <AcmeLogo />
        {/* ... */}
      </div>
    </main>
  );
}

太棒了，您已將兩種自訂字體新增到您的應用程式！接下來，讓我們將主視覺圖片新增到首頁。

為什麼要最佳化圖片？

Next.js 可以在頂層 /public 資料夾下提供靜態資源，例如圖片。/public 內的檔案可以在您的應用程式中被引用。

使用一般 HTML，您會如下新增圖片

<img
  src="/hero.png"
  alt="Screenshots of the dashboard project showing desktop version"
/>

但是，這表示您必須手動執行以下操作

確保您的圖片在不同的螢幕尺寸上具有響應式。
為不同的裝置指定圖片尺寸。
防止圖片載入時發生版面配置偏移。
延遲載入使用者視窗外的圖片。

圖片最佳化是網頁開發中的一個重要主題，甚至可以被視為一個專精領域。您可以使用 next/image 元件來自動最佳化您的圖片，而無需手動實作這些最佳化。

`<Image>` 元件

<Image> 元件是 HTML <img> 標籤的擴展，並具有自動圖片最佳化功能，例如

在圖片載入時自動防止版面配置偏移。
調整圖片大小以避免將大型圖片傳輸到具有較小視窗的裝置。
預設延遲載入圖片（圖片會在進入視窗時載入）。
在瀏覽器支援時，以現代格式（例如 WebP 和 AVIF）提供圖片。

新增桌面版主視覺圖片

讓我們使用 <Image> 元件。如果您查看 /public 資料夾內部，您會看到有兩個圖片：hero-desktop.png 和 hero-mobile.png。這兩個圖片完全不同，它們將根據使用者的裝置是桌上型電腦還是行動裝置來顯示。

在您的 /app/page.tsx 檔案中，從 next/image 匯入元件。然後，在註解下方新增圖片

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image';
 
export default function Page() {
  return (
    // ...
    <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
      {/* Add Hero Images Here */}
      <Image
        src="/hero-desktop.png"
        width={1000}
        height={760}
        className="hidden md:block"
        alt="Screenshots of the dashboard project showing desktop version"
      />
    </div>
    //...
  );
}

在這裡，您將 width 設定為 1000 像素，height 設定為 760 像素。設定圖片的 width 和 height 以避免版面配置偏移是一個良好的實踐，這些值應與來源圖片的長寬比相同。這些值不是圖片渲染的大小，而是用於理解長寬比的實際圖片檔案的大小。

您也會注意到 hidden 類別，用於從行動螢幕上的 DOM 中移除圖片，以及 md:block 用於在桌上型電腦螢幕上顯示圖片。

這就是您的首頁現在應呈現的樣子

Styled home page with a custom font and hero image

練習：新增行動版主視覺圖片

現在輪到您了！在您剛新增的圖片下方，為 hero-mobile.png 新增另一個 <Image> 元件。

圖片應具有 560 像素的 width 和 620 像素的 height。
它應該在行動螢幕上顯示，並在桌上型電腦上隱藏 - 您可以使用開發者工具來檢查桌上型電腦和行動裝置圖片是否已正確交換。