Next.js 的 Amplify 支援

Amplify 支援部署和託管使用 Next.js 建立的伺服器端轉譯 (SSR) Web 應用程式。Next.js 是SPAs使用 進行開發的 React 架構 JavaScript。您可以透過 Next.js 15 部署使用 Next.js 版本建置的應用程式，並具有影像最佳化和中介軟體等功能。

開發人員可以使用 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 版到第 15 版建置的應用程式的伺服器端轉譯 (SSR)。

如果您在 2022 年 11 月發行 Amplify 託管運算之前，已將 Next.js 應用程式部署至 Amplify，則您的應用程式會使用 Amplify 先前的SSR提供者 Classic （僅限 Next.js 11)。Amplify 託管運算不支援使用 Next.js 第 11 版或更早版本建立的應用程式。我們強烈建議您將 Next.js 11 應用程式遷移至 Amplify Hosting 運算受管SSR提供者。

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

支援的功能

• 伺服器端轉譯頁面 (SSR)

• 靜態頁面

• API 路由

• 動態路由

• 擷取所有路由

• SSG （靜態產生）

• 增量靜態再生 (ISR)

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

• 國際化 (i18n) 網域路由

• 國際化 (i18n) 自動地區設定偵測

• 中介軟體

• 環境變數

• 映像最佳化

• Next.js 13 應用程式目錄

不支援的功能

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

• 隨需增量靜態再生 (ISR)

• Next.js 串流

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

• 在回應後使用 執行程式碼 unstable_after（使用 Next.js 15 發行實驗功能）

Next.js 影像

映像的最大輸出大小不得超過 4.3 MB。您可以存放較大的影像檔案到某處，並使用 Next.js Image 元件來調整大小，並將其最佳化為 Webp 或AVIF格式，然後做為較小的大小。

請注意，Next.js 文件會建議您安裝 Sharp 映像處理模組，讓映像最佳化在生產中正常運作。不過，Amplify 部署不需要這麼做。Amplify 會自動為您部署 Sharp。