Amplify 對 Next.js 的支援

Amplify 支援使用 Next.js 建立的伺服器端轉譯 (SSR) Web 應用程式的部署和託管。Next.js 是一個反應框架用於SPAs開發 JavaScript. 您可以部署使用 Next.js 14 建置的應用程式，其中包含影像最佳化和中介軟體等功能。

開發人員可以使用 Next.js 來結合靜態網站生成（SSG），並SSR在單個項目中。SSG頁面會在建置時預先轉譯，SSR頁面會在要求時預先轉譯。

預渲染可以提高性能和搜索引擎優化。因為 Next.js 預先呈現伺服器上的所有頁面，因此每個頁面的HTML內容在到達用戶端的瀏覽器時都已準備就緒。此內容也可以加快載入速度。更快的加載時間可以改善最終用戶對網站的體驗，並對網站的SEO排名產生積極影響。預渲染還可以SEO通過使搜索引擎機器人輕鬆查找和抓取網站的HTML內容來改進。

Next.js 為測量各種性能指標提供內置分析支持，例如第一個字節的時間（TTFB）和第一個內容繪圖（FCP）。如需 Next.js 的詳細資訊，請參閱 Next.js 網站開始使用。

Next.js 功能支援

Amplify 託管計算可完全管理使用 Next.js 12、13 和 14 構建的應用程序的服務器端渲染（SSR）。如果您在 Amplify 託管計算發布之前部署了 Next.js 應用程序以 Amplify，則您的應用程序正在使用放大的先前SSR提供程序經典（僅限 Next.js 11）。Amplify 主機運算不支援使用 Next.js 版本 11 或更早版本建立的應用程式。我們強烈建議您將 Next.js 11 應用程式移轉至 Amplify 主機運算管理SSR提供者。

下列清單說明 Amplify 主機運算SSR提供者支援的特定功能。

支援的功能

• 伺服器端呈現頁面 (SSR)

• 靜態頁面

• API路線

• 動態路線

• 捕捉所有路線

• SSG(靜態產生)

• 增量靜態再生 (ISR)

• 國際化 (i18n) 子路徑路由

• 國際化 (i18n) 網域路由

• 國際化 (i18n) 自動語言環境偵測

• 中介軟體

• 環境變數

• 影像最佳化

• Next.js 應用程式目錄

不支援的功能

• 邊緣API路由 (不支援 Edge 中介軟體)

• 依需求增量靜態再生 (ISR)

• Next.js 流媒體

• 在靜態資產和最佳化影像上執行中介軟體

Next.js 圖片

圖像的最大輸出大小不能超過 4.3 MB。您可以將較大的圖像文件存儲在某處，並使用 Next.js 圖像組件調整大小並將其優化為 Webp 或AVIF格式，然後將其作為較小的尺寸。

請注意，Next.js 文件建議您安裝 Sharp 影像處理模組，以便讓影像最佳化在生產環境中正常運作。但是，這對於擴大部署來說並不是必要的。Amplify 功能會自動為您部署夏普。