靜態資源、詮釋資料 和 CSS

靜態資源

Next.js 可以在頂層 public 目錄 下運行靜態資源，例如圖片。就像 pages 一樣，public 目錄中的檔案可以在根目錄下被引用。

public 目錄對於 robots.txt、Google Site Verification 或任何靜態資源都很有用。請查看 Static File Serving文件以瞭解更多。

下載你的個人圖片

首先，讓我們取得您的個人圖片。

• 下載您的個人圖片，格式為 .jpg（或使用此檔案）。
• 在 public 目錄下創建一個名為 images 的目錄。
• 將圖片保存在 public/image 目錄，命名為 profile.jpg。
• 圖片尺寸可以大約為 400px x 400px。
• 您可以直接刪除 public 目錄下未使用的 SVG logo 檔案。

尚未優化的圖片

如果是使用 HTML，你可能會像這樣加入你的圖片：

<img src="/images/profile.jpg" alt="Your Name" />

然而，這也代表了你必須手動處理以下問題：

• 確保圖片可以響應不同螢幕
• 使用第三方工具或函式庫優化你的圖片
• 只在圖片進入可見區域時加載

但更好的是，Next.js 提供了一個 Image 組件，可以直接處理這個問題。

圖片元件和圖片優化

next/image 是為了現代網頁的需求，而在 HTML <img> 基礎之上建立的擴展元件。

在預設情況下 Next.js 支援圖片優化。包括了支援現代 web 格式，且進行大小調整、優化和運行圖片 (就像 WebP 一樣)，這避免了在較小的可見區域加載大型圖片。同時，Next.js 還可以自動適應未來的圖片格式，並將其提供給支援這些格式的瀏覽器。

自動圖片優化可與任何圖片一起使用。即使圖片由外部數據源（例如 CMS）托管，它仍然可以進行優化。

使用圖片元件

Next.js 在使用者發出請求時，會動態優化圖片，而非在建置時進行優化。這與靜態網站產生器以及僅支援靜態內容的解決方案不同，不論是上傳 10 張還是 1 千萬張圖片，都不會增加建置時間。

圖片默認採用「懶加載」方式，這意味著圖片不在可見區域時不會影響頁面速度。當圖片被滾動到可見區域時才會加載。

圖片總是以避免累積版面位移的方式呈現，這是 Google 會在搜尋排名中使用的核心網頁指標。

這裡有一個使用 next/image 來顯示我們個人圖片的範例。height 和 width 屬性應該是期望的渲染大小，並具有與原始圖片相同的長寬比。

注意： 稍後在 "拋光佈局" 中我們會使用這個組件，現在不需要複製它。

import Image from 'next/image';

const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Route of the image file
    height={144} // Desired size with correct aspect ratio
    width={144} // Desired size with correct aspect ratio
    alt="Your Name"
  />
);

返回上一頁 ← 前往下一頁 →