在 Next.js 中掌握 SSG：如何提升 SEO 與使用者體驗

SSG（靜態網站產生）是 Next.js 中的一種方法，類似於 ISR（增量靜態重新產生），但它僅在建置時運行。網站建置完成後，SSG 不會再次呈現頁面，直到下次建置為止。在本文中，我將深入探討 SSG 在 Next.js 中的工作原理、它如何改進 SEO 以及它如何增強使用者體驗。

什麼是SSG？

SSG 是 Next.js 中的一個方法，在建置過程中在伺服器上運行。它會產生靜態頁面及其 CSS、JavaScript 和相關資源，將所有內容捆綁在一起以獲得完整的靜態體驗。

SSG 如何運作？

要在專案中使用SSG，您需要在要使用SSG的頁面中匯出getStaticProps方法。如果您使用應用程式路由器，則在建置專案時 SSG 預設執行。但是，如果您使用頁面路由器，則必須手動新增 getStaticProps。

此方法會建立捆綁的靜態頁面，因此當使用者或爬蟲請求實作了 SSG 的頁面時，Next.js 會傳送一個完全準備好的頁面及其所有資源。這消除了加載額外資源的需要，最大限度地減少了延遲，這對於 SEO 和用戶體驗非常有用。

對於動態路由，例如使用 slug 或 ID 的部落格詳細資訊頁面，您需要另一種方法來取得該頁面的資料。這個方法是 getStaticPaths，在建置時它在 getStaticProps 之前運行。

如何在 App Router 中實作 SSG

當您建置專案時，SSG 預設在 Next.js App Router 中實作。您的所有頁面都將被捆綁並緩存在 CDN 中，因此無需為靜態路由添加額外的步驟。

但是，對於動態路由，例如使用 slugs 或 ID 的動態路由，Next.js 無法在建置時自動取得它們。您需要從 API 或項目中的其他來源取得這些清單。這就是generateStaticParams函數的用武之地。它允許您獲取動態路由的slugs或ID列表並傳回它們，因此Next.js可以為每個路由產生靜態頁面。需要記住的重要一點是，generateStaticParams 必須在伺服器元件中使用，而不是在客戶端元件中。

這是在 tsx 檔案中實現的範例：

這是在 jsx 檔案中實作的範例：

如何在尋呼路由器中實現 SSG

要在頁面路由器中實作 SSG，您需要建立 getStaticProps 函數並將其從要實作 SSG 的頁面中匯出。建置專案時會自動呼叫該函數。

如果您有動態路線，則需要建立另一個函數並將其匯出。正如我之前提到的，此函數在 getStaticProps 之前調用，您必須從 API 取得資料或從檔案取得 ID 或 slugs 清單。

這是在 tsx 檔案中實現的範例：

這是在 jsx 檔案中實作的範例：

結論

SSG 是一種捆綁和建立靜態頁面的有用方法。如果您想改善網站的 SEO 和使用者體驗，建議使用 SSG、ISR 或 SSR。

在這個部落格中，我寫了關於 SSG 的文章。我還可以在以下地址找到另一篇關於 ISR 的文章：Mastering ISR in Next.js。稍後我會再寫一篇關於SSR的文章。如果您有任何疑問，請隨時發表評論；我是來幫忙的。此部落格稍後可能會更新，因為我想與您分享最好的知識。

感謝您的閱讀！如果你想看更多文章，可以追蹤我的網站：Saeed Niyabati。我希望你喜歡它。暫時再見！

以上是在 Next.js 中掌握 SSG：如何提升 SEO 與使用者體驗的詳細內容。更多資訊請關注PHP中文網其他相關文章！