了解在開發模式下Next.js生成的圖標的含義
在使用Next.js應用程序時,您是否在頁面右下方看到一個小圖標,看起來像閃電?
如果您將其懸停,它將顯示“ Prerendered page”:
此圖標,這是僅在開發模式下可見當然,告訴您該頁面符合自動靜態優化的條件,這基本上意味著該頁面不依賴於需要在調用時獲取的數據,並且可以在構建時將其預呈現並構建為靜態HTML文件(當我們跑npm run build
)。
接下來可以通過缺少getInitialProps()
附加到頁面組件的方法。
在這種情況下,我們的頁面甚至可以更快,因為它將作為HTML文件靜態提供,而不是通過生成HTML輸出的Node.js服務器提供。
可能會出現在它旁邊的另一個有用圖標,或者代替它出現在非優先頁面上的是一個動畫三角形:
這是一個編譯指示符,當您保存頁面並且Next.js正在編譯應用程序之前,該提示會在熱代碼重新加載開始之前自動出現,以在應用程序中重新加載代碼。
這是一種非常好的方法,可以立即確定應用程序是否已經編譯,您可以測試正在處理的應用程序的一部分。
免費下載我的Next.js手冊
接下來的更多教程:
- Next.js入門
- Next.js vs Gatsby vs create-react-app
- 如何安裝Next.js
- 使用鏈接在Next.js中鏈接兩個頁面
- 路由器中Next.js中的動態內容
- 使用getInitialProps將數據饋送到Next.js組件
- 使用CSS樣式化Next.js組件
- 在Next.js中預取內容
- 使用路由器檢測Next.js中的活動鏈接
- 查看源代碼以確認SSR在Next.js中正常工作
- Next.js:使用自定義標籤填充head標籤
- 立即部署Next.js應用程序
- Next.js:僅在Next.js的服務器端或客戶端運行代碼
- 在生產中部署Next.js應用
- 如何分析Next.js應用程序捆綁包
- Next.js中的延遲加載模塊
- 向您的Next.js應用添加包裝器組件
- Next.js添加到您的應用程序中的圖標
- Next.js應用程序捆綁包
- 如何使用Next.js路由器
- 如何使用Next.js API路由
- 如何在Next.js應用中在服務器端獲取Cookie
- 如何更改Next.js應用程序端口