Next.js 9.3支持靜態網站生成,404優化等

Next.js 9.3

Next.js是用於服務器端渲染的React框架,其創建者將其顯示為React應用程序的零配置單命令工具鏈。

這個框架 提供了一個通用的結構,使您可以輕鬆創建React前端應用程序 透明地管理服務器端渲染。 Next.js版本9.3於週一發布,具有新功能和一些改進,我們可以發現生成靜態站點的能力是主要的新穎之處。

Next.js 9.3的新功能是什麼?

隨著Next.js 9.0的發布, 該框架引入了靜態自動優化的概念。該頁面沒有屏蔽要求 數據恢復,例如getInitialProps, 將自動以HTML呈現 一旦建成。

在其他情況下,甚至在阻止數據提取要求的情況下,您可能仍希望在編譯時使用靜態HTML創建頁面。 例如,營銷頁面就是這種情況 由內容管理系統(CMS)提供支持。

Next.js 9.3引入了兩種新的數據恢復方法: getStaticProps和getServerSideProps.

這些新方法 與getInitialProps模型相比有很多優點因為在即將成為SSG(靜態端生成)和SSR(服務器端渲染)之間有明顯的區別。 它們是API的補充。

所有新功能都向後兼容,並且 它們可以逐漸被採用。 沒有折舊,getInitialProps繼續正常工作。 已添加getStaticPaths參數以獲得動態路由。

  • getStaticProps:允許在構造期間獲取數據;
  • getStaticPaths-指定基於數據的動態路由;
  • getServerSideProps:允許您獲取每個請求的數據。

此新版本突出的另一個變化是對預覽模式的支持。 引入getStaticProps 在Next.js中 開闢了新的可能性, 例如在特定條件下按需使用Next.js渲染功能。

例如: 預覽草稿時 在CMS中,您將要跳過靜態渲染,而 按需提供草稿內容頁面 而不是發布的內容。 您希望Next.js僅在這種特定情況下才跳過靜態構建。 根據Next.js團隊的介紹,預覽模式使您可以執行此操作。

模式 預覽允許用戶跳過生成的頁面 靜態以按要求(SSR)返回草稿頁,例如從CMS。 但是,它不限於某些CMS系統。 預覽模式直接與getStaticProps和getServerSideProps集成,因此可以與任何類型的數據恢復解決方案一起使用。

Next.js 9.2添加了對內置CSS的支持, 但是Next.js 9.3添加了對Sass的支持。 支持全局樣式表和CSS模塊,以及嵌入式CSS。 Next.js現在支持帶有Sass文件的CSS模塊 使用[name] .module.scss文件命名約定。 與以前在next.js 5+中對next-sass的支持不同,全局Sass和CSS模塊現在可以共存。

模組 CSS允許您通過自動創建唯一的類名來本地管理Sass。

帶有9.0版 來自Next.js, 有一個頁面沒有自動以HTML呈現 靜態:404頁。

這背後的主要原因是處理404錯誤頁面比處理404錯誤更多。例如,它還處理錯誤。 由於針對不存在的路徑呈現了404頁, 按需呈現頁面可能導致更高的成本和更高的負載 服務器。 Framework 9.3版改進了功能並提供了自動靜態優化 404頁。

現在,當您的請求不包含error.js自定義頁面時,該文件 Next.js自動靜態生成404頁面 並在應提供404服務時使用它。此操作會自動發生,無需更改。

您也可以自定義此頁面。 要替換默認的404頁面,可以創建404.js文件。

如果您想了解更多信息,可以諮詢 以下鏈接。 


發表您的評論

您的電子郵件地址將不會被發表。 必填字段標有 *

*

*

  1. 負責數據:MiguelÁngelGatón
  2. 數據用途:控制垃圾郵件,註釋管理。
  3. 合法性:您的同意
  4. 數據通訊:除非有法律義務,否則不會將數據傳達給第三方。
  5. 數據存儲:Occentus Networks(EU)託管的數據庫
  6. 權利:您可以隨時限制,恢復和刪除您的信息。