Next.js 提供了內建的影象最佳化功能，它使用 next/image 元件來自動處理圖片，包括懶載入、響應式圖片和基於WebP的圖片格式。
next/image使用
首先，確保你的Next.js版本支援此特性。如果使用的是較早的版本，請升級到最新版：
npm install next@latest
然後，使用 next/image 元件替換HTML中的<img>標籤：
import Image from 'next/image';
function MyComponent() {
return (
<div>
<Image
src="/path/to/image.jpg"
alt="My Image"
width={500}
height={500}
/>
</div>
);
}
export default MyComponent;
引數解析：
src: 圖片的URL，可以是相對或絕對路徑，也可以是遠端URL。alt: 圖片的替代文字，對SEO和可訪問性很重要。width和height: 圖片的寬度和高度，用於生成響應式圖片和懶載入。務必提供準確的值，以最佳化效能。layout: 控制圖片佈局，可選值有fixed（固定尺寸），responsive（響應式，預設），intrinsic（根據內容調整大小）和fill（填充容器）。quality: 圖片的JPEG或WebP質量，範圍從1到100，預設75。priority: 是否優先載入圖片，適用於首屏圖片，預設false。unoptimized: 如果設定為true，則不使用Next.js的影象最佳化，適用於已最佳化的圖片。loading: 控制圖片載入型別，可選值為auto（預設，使用瀏覽器的預設載入行為），lazy（懶載入）和eager（立即載入）。
懶載入和響應式圖片：
預設情況下，next/image 實現了懶載入，只有當圖片進入視口時纔會開始載入。響應式圖片是自動處理的，根據裝置的螢幕寬度提供不同尺寸的圖片。
WebP格式：
Next.js 會自動檢測瀏覽器是否支援WebP格式，如果支援，它會優先使用WebP格式，以減小圖片大小並提高載入速度。如果瀏覽器不支援WebP，Next.js會回退到其他格式，如JPEG或PNG。
自定義圖片最佳化配置：
在 next.config.js中，可以自定義影象最佳化的全域性配置：
module.exports = {
images: {
domains: ['example.com'], // 允許載入的遠端圖片域名
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], // 響應式圖片尺寸
loader: 'default', // 或自定義loader
path: '/_next/image', // 圖片處理路徑
formats: ['image/webp'], // 支援的圖片格式
quality: 75, // 預設圖片質量
placeholder: 'blur', // 預設模糊佔位符，可選'default'或'blur'
},
};
注意事項：
對於本地圖片，確保它們位於public目錄下，因為Next.js只處理這個目錄內的靜態資源。
對於CDN上的圖片，需要配置domains，以防止跨域問題。
不要忘記提供準確的width和height，這對於效能至關重要。
透過使用Next.js的Image元件，你可以輕鬆地實現圖片的懶載入、響應式和WebP支援，從而提高頁面載入速度和使用者體驗。
圖片佔位符
Next.js 的 next/image 元件提供了兩種佔位符選項：default 和 blur。預設情況下，佔位符是一個透明的方形，而 blur 選項會生成一個模糊的預覽影象。
<Image
src="/path/to/image.jpg"
alt="My Image"
width={500}
height={500}
placeholder="blur"
/>
blur 佔位符可以提供更好的使用者體驗，因為它在圖片完全載入之前給使用者一個關於圖片內容的預覽。但是，這可能會增加頁面的初始載入時間，因為需要生成模糊影象。
自定義圖片樣式
next/image 元件允許你透過 style 屬性或內聯樣式來新增自定義CSS樣式。例如，如果你想改變圖片的邊框：
<Image
src="/path/to/image.jpg"
alt="My Image"
width={500}
height={500}
style={{ borderRadius: '10px', boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)' }}
/>
使用自定義Loader
如果你需要自定義圖片載入邏輯，可以透過 loader 配置項來實現。例如，你可以使用自定義函式來處理圖片URL：
const customLoader = (url) => `https://example.com/images/${url}`;
function MyComponent() {
return (
<div>
<Image
src="/path/to/image.jpg"
alt="My Image"
width={500}
height={500}
loader={customLoader}
/>
</div>
);
}
export default MyComponent;
最佳化圖片大小
爲了進一步最佳化圖片大小，可以使用圖片壓縮工具（如TinyPNG或ImageOptim）預先壓縮圖片，或者使用Next.js的unoptimized屬性來禁用內建的最佳化：
<Image
src="/path/to/image.jpg"
alt="My Image"
width={500}
height={500}
unoptimized
/>
效能監控
Next.js 提供了 Lighthouse 整合，可以在開發過程中檢查頁面效能，包括圖片最佳化。在開發模式下執行 next dev 並訪問你的應用，然後在瀏覽器的開發者工具中檢視Lighthouse報告。
適應性圖片大小
在某些場景下，你可能希望圖片的大小根據其容器的大小動態調整。next/image 提供了 layout="fill" 選項來實現這一點。這將使圖片充滿其父元素，保持寬高比不變：
<div style={{ width: '100%', height: '200px' }}>
<Image
src="/path/to/image.jpg"
alt="My Image"
layout="fill"
objectFit="cover" // 可選值有 'contain'、'cover'、'fill'、'scale-down' 和 'none'
/>
</div>
圖片預載入
預載入圖片可以幫助改善使用者體驗，尤其是對於重要圖片。Next.js 提供了 priority 屬性來實現這一點：
<Image
src="/path/to/image.jpg"
alt="My Image"
width={500}
height={500}
priority
/>
這將使圖片在頁面載入時優先處理，即使它不在當前視口內。
圖片佔位符顏色
除了模糊佔位符，你還可以使用顏色佔位符。在 next.config.js 中配置 placeholder 為 color，然後使用 backgroundColor 屬性：
module.exports = {
images: {
placeholder: 'color',
backgroundColor: '#f0f0f0', // 自定義背景顏色
},
};
jsx
<Image
src="/path/to/image.jpg"
alt="My Image"
width={500}
height={500}
placeholder="color"
/>
處理SVG圖片
Next.js 的 next/image 也支援SVG格式的圖片。由於SVG是向量圖，所以不需要 width 和 height 屬性：
<Image src="/path/to/image.svg" alt="My SVG Image" />
與其他庫的相容性
如果你的專案中使用了其他的圖片庫（如react-image或react-lazyload），可能需要處理與next/image的衝突。一種方法是在next.config.js中禁用Next.js的圖片處理：
module.exports = {
images: {
disableStaticImages: true,
},
};
這樣，Next.js就不會處理 <img> 標籤，你可以繼續使用你喜歡的圖片庫。
專案實踐
總是提供準確的 width 和 height，以最佳化效能。
使用懶載入和佔位符，提供良好的使用者體驗。
根據需要選擇合適的佈局（fixed、responsive、intrinsic 或 fill）。
對於重要的圖片，考慮使用 priority。
使用WebP格式，如果瀏覽器支援。
定期檢查和最佳化圖片大小，以減少載入時間。
