我們添加的第二個頁面目前沒有樣式。 讓我們添加一些 CSS 來設置頁面樣式。
Next.js 內置了對 CSS 和 Sass 的支持。 在本教學中，我們將使用 CSS。
本課還將討論 Next.js 如何處理像圖片這樣的靜態資產和像 <title> 標籤這樣的頁面後設資料（metadata）。
在本課中，您將學習：
<head> 的內容。pages/_app.js 中添加全域 CSS。Next.js 可以在頂端 public 目錄下提供靜態資產，比如圖片。 public 中的文件可以從應用程式的根目錄中引用，類似於 pages。
public 目錄對於 robots.txt、Google 網點驗證和任何其他靜態資產也很有用。 查看靜態文件服務的文檔以了解更多資訊。
首先，讓我們檢索您的個人資料圖片。
.jpg 格式下載您的個人資料圖片（或使用此文件）。public 目錄中建立一個 images 目錄。public/images 目錄中將圖片另存為 profile.jpg。public 目錄下刪除未使用的 SVG 徽標文件。使用常規 HTML，您將添加您的個人資料圖片，如下所示：
<img src="/images/profile.jpg" alt="Your Name" />但是，這意味著您必須手動處理：
還有更多要做的事。 然而，Next.js 提供了一個開箱即用的 Image 元件來為您處理這個問題。
next/image 是 HTML 元素 <img> 的擴展，是為現代網路發展而來的。
Next.js 預設還支持圖片優化。 這允許在瀏覽器支持時以 WebP 等現代格式調整、優化和提供圖像。 這避免了將大圖像傳送到具有較小視區的設備。 它還允許 Next.js 自動採用未來的圖像格式並將它們提供給支持這些格式的瀏覽器。
自動圖像優化適用於任何圖片源。 即使圖片由外部數據源（如 CMS）託管，它仍然可以進行優化。
Next.js 不是在建構時優化圖像，而是在用戶請求時按需求優化圖像。 與靜態網站生成器和純靜態解決方案不同，您的建構時間不會增加，無論是發送 10 個圖像還是 1000 萬個圖像。
預設情況下，圖像是延遲加載的。 這意味著您的頁面速度不會因視區之外的圖片而受到懲罰。 圖片會在滾動到視區時才加載。
圖片總是以這樣的方式呈現，以避免累積佈局移位（Cumulative Layout Shift），這是谷歌將在搜索排名中使用的網路核心指標 （Core Web Vital） 。
下面是一個使用 next/image 來顯示我們的個人資料圖片的範例。 height 和 width props 應該要是所需渲染的大小，縱橫比與源圖片相同。
注意：我們稍後將在“拋光佈局”中使用該元件，無需複製它。
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 參考文件。
下一節中，我們將繼續認識後設資料 （Metadata） 。
© Copyrights 從想像到創造. All Rights Reserved.
