靜態資源、詮釋資料 和 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 來顯示我們個人圖片的範例。heightwidth 屬性應該是期望的渲染大小,並具有與原始圖片相同的長寬比。

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

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" /> );

為了深入了解自動圖片優化,請參考文件。

若想更瞭解 Image元件,請參閱 next/image 的 API 文件

小試身手

快速複習:next/image 為您簡化了哪些工作?

返回上一頁 ← 前往下一頁 →
本篇文章由oaoxd0314

oaoxd0314

貢獻翻譯。瞭解如何參與貢獻